jQueryでcssを追加、削除(複数追加や!importantの追加も)

  • このエントリーをはてなブックマークに追加
  • Pocket

スポンサードリンク

jQueryでcssを1つ追加したり、複数追加する方法です。

直接HTMLにスタイルを追加することになるのであまりオススメはできませんが、あらかじめ外部cssに設定できない動的なスタイルなどで使う場面も意外と多いものです。

cssの!importantの指定方法も併せてご紹介します。

 

css() でスタイルを1つ追加、削除、上書きする

指定の要素にstyle属性を1つ設定します。

基本構文

$(‘p’).css(‘color’, ‘red’)

css()の引数にキーと値をカンマ区切りで指定します。

キーにはcssプロパティを、値にはプロパティの値を設定します。

指定要素全てにスタイルを適用するサンプル

<p>要素にcssを追加してテキストを赤字にしてみましょう。

HTML

jQuery

結果

cssを追加1
cssを追加2
cssを追加3

<p>要素にcssが追加され、テキストが赤字で表示されました。

指定要素からスタイルを削除するサンプル

<p>要素に設定してあるcssを削除してみましょう。

cssでプロパティを空に設定すると、そのcssプロパティが削除されます。

HTML

cssを追加1
cssを追加2
cssを追加3

jQuery

結果

cssを追加1
cssを追加2
cssを追加3

cssの値を空に設定することで<p>要素からcssが削除され、テキストが黒字に戻りました。

指定要素のスタイルを別の値に上書きするサンプル

<p>要素に設定してあるcssにさらに別の値を設定すると、上書きされます

HTML

cssを追加1
cssを追加2
cssを追加3

jQuery

結果

cssを追加1
cssを追加2
cssを追加3

cssの値をさらに別の値に設定することで<p>要素のcssが上書きされ、テキストカラーがブルーに変わりました。

css() でスタイルを複数追加する

指定の要素にstyle属性を複数設定します。

基本構文

$(‘p’).css({‘color’ : ‘red’, ‘text-decoration’ : ‘underline’})

css()の引数には、キーと値を:(コロン)で区切った値を1セットとして、カンマ区切りで指定し、{}(波カッコ)で囲ったハッシュ形式で設定します。

指定要素全てに複数のスタイルを適用するサンプル

<p>要素に複数のcssを追加して、テキストを赤字にして、赤線も引いてみましょう。

HTML

jQuery

結果

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

jQuery

結果

!impotrantが付きましたね。

ただ、あまり使わないようにしたいものです。

スポンサードリンク

  • このエントリーをはてなブックマークに追加
  • Pocket

コメントを残す

*