jQueryでcssを1つ追加したり、複数追加する方法です。
直接HTMLにスタイルを追加することになるのであまりオススメはできませんが、あらかじめ外部cssに設定できない動的なスタイルなどで使う場面も意外と多いものです。
cssの!important
の指定方法も併せてご紹介します。
目次
css() でスタイルを1つ追加、削除、上書きする
指定の要素にstyle
属性を1つ設定します。
基本構文
$(‘p’).css(‘color’, ‘red’)
css()
の引数にキーと値をカンマ区切りで指定します。
キーにはcss
プロパティを、値にはプロパティの値を設定します。
指定要素全てにスタイルを適用するサンプル
<p>
要素にcss
を追加してテキストを赤字にしてみましょう。
HTML
1 2 3 |
<p>cssを追加1</p> <p>cssを追加2</p> <p>cssを追加3</p> |
jQuery
1 2 3 4 5 6 |
$(function() { // <p>要素にテキストを赤にするcssを追加 $('p').css('color', 'red'); }); |
結果
1 2 3 |
<p style="color: red">cssを追加1</p> <p style="color: red">cssを追加2</p> <p style="color: red">cssを追加3</p> |
cssを追加1
cssを追加2
cssを追加3
<p>
要素にcss
が追加され、テキストが赤字で表示されました。
指定要素からスタイルを削除するサンプル
<p>
要素に設定してあるcss
を削除してみましょう。
css
でプロパティを空に設定すると、そのcss
プロパティが削除されます。
HTML
1 2 3 |
<p style="color: red">cssを追加1</p> <p style="color: red">cssを追加2</p> <p style="color: red">cssを追加3</p> |
cssを追加1
cssを追加2
cssを追加3
jQuery
1 2 3 4 5 6 |
$(function() { // <p>要素にcssの値を空で設定するとcssが削除される $('p').css('color', ''); }); |
結果
1 2 3 4 |
<!--styleタグが削除された--> <p>cssを追加1</p> <p>cssを追加2</p> <p>cssを追加3</p> |
cssを追加1
cssを追加2
cssを追加3
css
の値を空に設定することで<p>
要素からcss
が削除され、テキストが黒字に戻りました。
指定要素のスタイルを別の値に上書きするサンプル
<p>
要素に設定してあるcss
にさらに別の値を設定すると、上書きされます。
HTML
1 2 3 |
<p style="color: red">cssを追加1</p> <p style="color: red">cssを追加2</p> <p style="color: red">cssを追加3</p> |
cssを追加1
cssを追加2
cssを追加3
jQuery
1 2 3 4 5 6 |
$(function() { // <p>要素に設定済みcssプロパティをさらに別の値に設定するとcssが上書きされる $('p').css('color', 'blue'); }); |
結果
1 2 3 4 |
<!--テキストがブルーに変わった--> <p style="color: blue">cssを追加1</p> <p style="color: blue">cssを追加2</p> <p style="color: blue">cssを追加3</p> |
cssを追加1
cssを追加2
cssを追加3
css
の値をさらに別の値に設定することで<p>
要素のcss
が上書きされ、テキストカラーがブルーに変わりました。
css() でスタイルを複数追加する
指定の要素にstyle
属性を複数設定します。
基本構文
$(‘p’).css({‘color’ : ‘red’, ‘text-decoration’ : ‘underline’})
css()
の引数には、キーと値を:
(コロン)で区切った値を1セットとして、カンマ区切りで指定し、{}
(波カッコ)で囲ったハッシュ形式で設定します。
指定要素全てに複数のスタイルを適用するサンプル
<p>
要素に複数のcss
を追加して、テキストを赤字にして、赤線も引いてみましょう。
HTML
1 2 3 |
<p>cssを追加1</p> <p>cssを追加2</p> <p>cssを追加3</p> |
jQuery
1 2 3 4 5 6 |
$(function() { // <p>要素にテキストを赤字にし、アンダーラインを引くcssを追加 $('p').css({'color' : 'red', 'text-decoration' : 'underline'}); }); |
結果
1 2 3 |
<p style="color: red; text-decoration: underline;">cssを追加1</p> <p style="color: red; text-decoration: underline;">cssを追加2</p> <p style="color: red; text-decoration: underline;">cssを追加3</p> |
cssを追加1
cssを追加2
cssを追加3
<p>
要素にcss
が複数追加されました。
テキストが赤字で表示され、さらに赤いアンダーラインが引かれています。
もちろん、複数上書きさせたり、複数削除も可能です。
addClass() でcssのclassを追加、削除する
css
を直接HTMLに設定することはあまり推奨されません。
classにcssを設定しておき、必要に応じてclassを付けたり外すことで、HTMLソースを汚すことなくスタイルを適用できるため、なるべくこの方法でスタイルを設定したいですね。
classの追加、削除については以下の記事でご紹介しています。
参考:jQueryでclassを追加したり削除する〜addClass,removeClass,toggleClass
cssの!importantを設定する
cssに!important
を設定すると、全てにおいて優先してスタイルが適用されるようになります。
そのため思わぬ弊害となることもあり、あまり推奨はされませんが、どうしても使わざるを得ない場面も出てくるでしょう。
通常のやり方ではなぜか設定されないため、以下のように設定します。
HTML
1 |
<p>!importantを追加</p> |
jQuery
1 2 3 4 5 6 7 |
$(function() { // <p>要素に!importantを設定したcssを追加 // cssTextを使う $('p').css({'cssText': 'color: blue !important'}); }); |
結果
1 2 |
<!-- !importantが付いたstyleを適用 --> <p style="color: blue !important;">!importantを追加</p> |
!impotrant
が付きましたね。
ただ、あまり使わないようにしたいものです。