jQueryでCSSプロパティを追加・変更する方法と注意点

要素のCSSプロパティはjQueryで用意されているメソッドを使っても変更可能です。

そこでここではそれらのメソッドの使い方についてコード例と一緒に紹介します。

またメソッドを複数組み合わせて使う場合の注意点についても解説

CSS操作に使えるメソッドまとめ

要素のCSS変更に使えるメソッドは次の通り

  • cssメソッド
  • propメソッド(またはattrメソッド)

これらの使い方について次で説明していきます。

cssメソッド

これは要素にCSSプロパティを追加するためのメソッド

CSS全体を上書きではなく、プロパティを新規追加するために使われます。

そしてこれを使ったプロパティの追加方法は主に次の2つ

  • 単独のプロパティを追加
  • プロパティをまとめて追加

この2つのやり方はそれぞれ次の通り

 

まず初めは単独のプロパティを追加する方法

やり方は次のようにcssメソッドにプロパティ名とプロパティ値を渡すだけです。

上のコードでは css('margin', '30px')  で要素の30pxのマージンを指定してます。

ちなみに数値だけが指定された場合は自動的にピクセルとして換算される模様です。

 

お次はまとめてプロパティを追加する方法

こちらは次のようにプロパティと値のペアを持つ連想配列を渡してあげればOK

連想配列内では1つのプロパティを 'プロパティ名': '値'  のような形式で指定します。

連想配列なのでいくらでもプロパティ指定可能なのがこの書き方の便利な所ですね。

 

以上がcssメソッドを使ったプロパティの追加方法

jQueryでCSSを変更する場合はこちらを使うことが多いような気がします。

propメソッドまたはattrメソッド

propまたはattrメソッドは属性とを変更するためのメソッド

CSS専用のメソッドではないですが、CSSプロパティの変更にも使用可能です。

ただし注意点でも書きますが、要素のCSSを全て上書きしてしまう点に注意が必要です。

 

使い方は簡単で次のようにpropメソッドからstyle属性にCSSコードを設定するだけ

上のコードは要素のCSSを上書きしてfont-weightプロパティを bold  に変更してます。

もちろん次のようにすれば複数プロパティの指定も可能

プロパティの指定の仕方はstyke属性に直書きする時と全く同じですね。

 

またpropメソッドではなく、attrメソッドでも同じことが可能です。

例えば次は prop  の代わりに attr  を使ってCSSを変更しているコード例

attr  と prop  だとどう違うの?という話ですが、CSSの変更に使うだけならほとんど変わりません。

もちろんそれ以外では違いがあるんですが、この場合もどっちを使ってもOKです。

 

以上が prop  または attr  を使ったCSSプロパティの変更方法

こちらはcssメソッドと違ってCSSを全て上書きしたいときとかに便利です。

CSS操作メソッドを使う時の注意点

jQueryではCSS操作系のメソッドがあって便利ですが、1つ注意点があります。

それは先ほど書いたようにpropまたはattrはCSSを全て上書きしてしまうということ

 

どういうことか例を使って説明しましょう。

例えば次はcssメソッドの後にpropメソッドでCSSを変更しているコード例です。

この例だと要素の背景色が青、文字色が白、マージンが30pxが適用されると思いがちです。

しかし実際は最後に prop  で指定したマージン30pxしか適用されません

というか prop  で上書きされてしまうので、cssメソッドでの変更はなかったことになります。

 

こういう風に prop  とか attr  を使った場合は

今までのCSSの変更を全て上書きして消去してしまう

ということに要注意です。

一応 prop  や attr  でもCSS指定できますが、あまり使わない方が安全かもしれません。

jQueryからCSSプロパティを変更するには

ここまでで説明したのがCSSプロパティをjQueryから変更する方法

ですがプロパティ値を変更するだけでなく取得する方法も当然あります。

そのために使えるのが次の2つのメソッド

  • cssメソッド
  • attrメソッド

今紹介した css  とか attr  は値を取得するにも使えるものです。

 

メソッドを使った取得方法やコード例については次でまとめました。

変更方法のついでに取得する方法も知っておくとコードが書きやすくなるはずです。

ここまでのまとめ

ということjQueryでCSSを操作する方法(メソッド)まとめ

  • cssメソッド
    要素にCSSプロパティを新規追加する。もしプロパティが既にある場合は上書き
    こちらは個別のプロパティを変更するだけなのでCSS全体には影響なし
  • attrまたはpropメソッド
    要素のCSS全体を上書きするために使うことが可能
    ただし呼び出し前の全ての変更が消去されてしまう点に要注意!

一応propとattrメソッドでのやり方も紹介しましたが、基本はcssメソッドを使いましょう。

ではでは($・・)/~~~

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください