【初心者入門】jQueryでCSSを変更する方法を解説! | WEBCAMP NAVI
【7月枠も残りわずか】転職保証コース

【初心者入門】jQueryでCSSを変更する方法を解説!

みなさんはCSSやjQueryの学習をしていませんか?

jQueryを活用している時に、CSSを変更した時もありますよね?

今回の記事ではjQueryでCSSを変更する方法を解説します!

jQueryでCSS変更可能です

CSSは本来なら、WEBページファイルであるHTMLファイル内や、別のCSS専用ファイルを用いて定義するのが一般的です。

ですが、javascript上から、何らかの動作時に背景色を変えたい、動きを付けたいという場合にも変更することがあります。ここでは、javascriptの中でもまだ本流で使われているjQueryからのCSS変更方法をご紹介します。

jQueryとは

jQuery(ジェイクエリー)は、JavaScriptコードをより簡単に記述できるようにするために設計されたJavaScriptライブラリの一つです。通常のJavaScriptのままでは煩雑化・複雑化するコード内容を簡潔に記述できるのが魅力です。

jQueryの事前知識

jQueryの詳しい説明は省略しますが、今回は以下だけ把握しておけば理解可能です。覚えておいてください。

1.要素に対して操作する場合:例えばp要素を指定する場合には、$(‘p’)と記述する。

2.CSSのclassセレクタに対して操作する場合:例えば、testクラスを指定する場合には、$(‘.test’)と記述する。

3.CSSのidセレクタに対して操作する場合:例えば、idが「test」を指定する場合には、$(‘#test’)と記述する。

jQueryでCSSを設定する

実際のコードをご紹介します。

HTML内の要素にstyle属性を直接設定する場合

その場合は、cssメソッドを使用します。

1. ひとつのプロパティの場合

$(‘要素’).css(‘プロパティ’,’値’);

2.複数のプロパティの場合

$(‘要素’).css({‘プロパティ’:’値’,’プロパティ’:’値’});

HTML内の要素にclassセレクタを追加、削除

その場合はaddClass及びremoveClassメソッドを使用します。

1.要素にClassセレクタを追加する

$(‘要素’).addClass(‘class名’);

2.要素についているClassセレクタを削除する

$(‘要素’).removeClass(‘css名’);

classセレクタまたはidセレクタのプロパティを追加(変更)

その場合は、cssメソッドでプロパティで追加または変更します。cssを追加する時に既に指定されていた場合でも上書きされこの指定が有効になります。

1. ひとつのプロパティの場合

$(‘class名’).css(‘プロパティ’,’値’);
$(‘id名’).css(‘プロパティ’,’値’);

2.複数のプロパティの場合

$(‘class名’).css({‘プロパティ’:’値’,’プロパティ’:’値’});
$(‘id名’).css({‘プロパティ’:’値’,’プロパティ’:’値’});

classセレクタまたはidセレクタのプロパティの削除

その場合は、cssメソッドでプロパティの追加を行う際に値を指定しないことで削除できます。

1. ひとつのプロパティの場合

$(‘class名’).css(‘プロパティ’,”);
$(‘id名’).css(‘プロパティ’,”);

2.複数のプロパティの場合

$(‘class名’).css({‘プロパティ’:”,’プロパティ’:”});
$(‘id名’).css({‘プロパティ’:”,’プロパティ’:”});

サンプル

HTML
<!DOCTYPE html>
<html>
<head>
<title>jquery-CSS</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
#box1{
width: 130px;
height: 80px;
border:1px solid #000;
text-align:center;
font-size:14px;
}
.boxadd {
font-weight:bold;
}
</style>
<script>
$(function() {
// ボタン1 (背景色を黄色に、文字サイズを12pxに指定)
$("#button1").click(function() {
$("#box1").css({
'background-color':'yellow',
'font-size' :'12px'
});

});

// ボタン2 (背景色を緑色に、文字サイズを16pxに指定)
$("#button2").click(function() {
$("#box1").css({
'background-color':'lightgreen',
'font-size' :'16px'
});
});

// ボタン3 (クラスboxaddを追加)
$("#button3").click(function() {
$("#box1").addClass('boxadd');

});

// ボタン4 (クラスboxaddを削除)
$("#button4").click(function() {
$("#box1").removeClass('boxadd');

});

});
</script>
</head>
<body>
<div id="box1">ボックス1</div>
<input type="button" id="button1" value="ボタン1" /><br/>
<input type="button" id="button2" value="ボタン2" /><br/>
<input type="button" id="button3" value="ボタン3" /><br/>
<input type="button" id="button4" value="ボタン4" /><br/>
</body>
</html>

まとめ

jQueryでCSSを設定する方法を紹介していきましたが、いかがでしたか?

こういうシュチュエーションも実務だと想定されますので、この機会にぜひ使いこなしてみてくださいね!

 

自宅にいながら、プロのキャリアアドバイザーに無料オンライン相談!

DMM WEBCAMPは転職成功率は98%※1の全コースオンライン対応の転職保証型のプログラミングスクールです。短期間で確実にスキルを身につけて、ひとりひとりに寄り添った転職サポートで、未経験からのエンジニア転職を叶えます!

外出自粛期間中でも、自宅にいながらオンライン学習でスキルを高めることができます。

キャリアに迷ったら、まずはビデオ通話で無料キャリア相談を受けてみませんか?

自宅で過ごす時間が増えた今こそキャリアアップを目指しましょう!この機会を活用し、ぜひDMM  WEBCAMPの無料カウンセリングをご利用ください。

オンラインで実施中/
【無料】キャリア相談の日程を見る

※ 12019年4月時点