jQueryでcssの設定・変更・削除をする方法【サンプル有】

2019年7月11日2019年8月4日

jQueryで各要素のcssを操作する方法についてまとめました。

要素にcssプロパティと値を直接追加する方法

要素にcssプロパティを直接追加したい場合は、

$('.test').css('color', 'red');

と書きます。

そうすると、.test要素にインラインスタイルが定義され、このように変化します。

<!-- style=が追加されている -->
<p class="test" style="color: red;">テスト</p>

$()内に要素を指定し、css()の第一引数にプロパティを、第二引数に値を設定してください。

<p class="ex01">この文字を赤くします。</p>

<script>
$(function(){
    $('.ex01').css('color', 'red');
});
</script>

一度に複数のプロパティを追加する方法

一度に複数のプロパティを追加したい場合は、行を分けて

$('.test').css('color', 'red'); //文字を赤くする
$('.test').css('font-weight', 'bold'); //文字を太くする

と書いても良いですが、一行でまとめてしまいたい場合は、プロパティと値を「:」で区切り、設定したいプロパティの数だけカンマ区切りで書くことで処理できます。

波かっこで外を括り、css({})と書かなくてはいけないので注意しましょう。

<p class="ex02">この文字を赤く、太くします。</p>

<script>
$(function(){
    $('.ex02').css({'color' : 'red', 'font-weight' : 'bold'});
});
</script>

cssの値を取得する方法

要素に設定されている特定のプロパティの値を確認したい時も、.css()で行えます。

.css()の第一引数にプロパティのみを設定すると、現在設定されている値が確認できます。

<p class="ex03" style="text-align: center;">このp要素のtext-alignプロパティを取得します。</p>

<script>
$(function(){
    console.log( $('.ex03').css('text-align') );
});
</script>

参考 console.log()の使い方

値の取得を利用して、要素が現在表示か非表示か、などの判定も行えるようになります。

//.test要素は表示か非表示か判定したい場合の処理
if($('.test').css('display') !== 'none'){
    //表示時の処理
}else{
    //非表示時の処理
}

ただし、一部のプロパティでは、設定した値がそのまま帰ってくるわけではないためご注意ください。

「color」は、カラーコードで指定しても、色名「blue、red」を指定しても、返ってくる値はrgbに変換された値になります。

<p class="ex04" style="color: red;">赤い文字</p>
<p class="ex14" style="color: #FF0000">赤い文字</p>

<script>
$(function(){
    console.log( $('.ex04').css('color') );
    console.log( $('.ex14').css('color') );
});
</script>

cssで設定されたプロパティを削除（初期化する）方法

cssで設定されたプロパティ値を初期化したい場合は、値の空文字を代入することで可能です。

$('.test').css('color', '');

プロパティそのものを未定義とするため、値はデフォルト（初期値）となります。

<p class="ex05" style="color: red;">赤い文字ですが元に戻ります。</p>

<script>
$(function(){
    $('.ex05').css('color', '');
});
</script>

---

以上、jQueryでcssの設定・変更・削除をする方法、でした。