要素のCSSプロパティはjQueryで用意されているメソッドを使っても変更可能です。
そこでここではそれらのメソッドの使い方についてコード例と一緒に紹介します。
またメソッドを複数組み合わせて使う場合の注意点についても解説
CSS操作に使えるメソッドまとめ
要素のCSS変更に使えるメソッドは次の通り
- cssメソッド
- propメソッド（またはattrメソッド）
これらの使い方について次で説明していきます。
cssメソッド
これは要素にCSSプロパティを追加するためのメソッド
CSS全体を上書きではなく、プロパティを新規追加するために使われます。
そしてこれを使ったプロパティの追加方法は主に次の２つ
- 単独のプロパティを追加
- プロパティをまとめて追加
この２つのやり方はそれぞれ次の通り
まず初めは単独のプロパティを追加する方法
やり方は次のようにcssメソッドにプロパティ名とプロパティ値を渡すだけです。
|
1 2 |
/** CSSプロパティを追加 */ $('.hoge').css('margin', '30px'); |
上のコードでは css('margin', '30px') で要素の30pxのマージンを指定してます。
ちなみに数値だけが指定された場合は自動的にピクセルとして換算される模様です。
お次はまとめてプロパティを追加する方法
こちらは次のようにプロパティと値のペアを持つ連想配列を渡してあげればOK
|
1 2 3 4 5 |
$('.hoge').css({ 'background': 'blue', 'color': 'white', 'padding': '6px 9px' }); |
連想配列内では１つのプロパティを 'プロパティ名': '値' のような形式で指定します。
連想配列なのでいくらでもプロパティ指定可能なのがこの書き方の便利な所ですね。
以上がcssメソッドを使ったプロパティの追加方法
jQueryでCSSを変更する場合はこちらを使うことが多いような気がします。
propメソッドまたはattrメソッド
propまたはattrメソッドは属性とを変更するためのメソッド
CSS専用のメソッドではないですが、CSSプロパティの変更にも使用可能です。
ただし注意点でも書きますが、要素のCSSを全て上書きしてしまう点に注意が必要です。
使い方は簡単で次のようにpropメソッドからstyle属性にCSSコードを設定するだけ
|
1 |
$('.hoge').prop('style', 'font-weight: bold'); |
上のコードは要素のCSSを上書きしてfont-weightプロパティを bold に変更してます。
もちろん次のようにすれば複数プロパティの指定も可能
|
1 |
$('.hoge').attr('style', 'font-size: 21px;font-weight: bold;'); |
プロパティの指定の仕方はstyke属性に直書きする時と全く同じですね。
またpropメソッドではなく、attrメソッドでも同じことが可能です。
例えば次は prop の代わりに attr を使ってCSSを変更しているコード例
|
1 |
$('.hoge').attr('style', 'font-weight: bold'); |
attr と prop だとどう違うの？という話ですが、CSSの変更に使うだけならほとんど変わりません。
もちろんそれ以外では違いがあるんですが、この場合もどっちを使ってもOKです。
以上が prop または attr を使ったCSSプロパティの変更方法
こちらはcssメソッドと違ってCSSを全て上書きしたいときとかに便利です。
CSS操作メソッドを使う時の注意点
jQueryではCSS操作系のメソッドがあって便利ですが、１つ注意点があります。
それは先ほど書いたようにpropまたはattrはCSSを全て上書きしてしまうということ
どういうことか例を使って説明しましょう。
例えば次はcssメソッドの後にpropメソッドでCSSを変更しているコード例です。
|
1 2 3 4 5 6 7 8 |
/** 初めにcssメソッドで変更 */ $('.hoge').css({ 'background': 'blue', 'color': 'white', }); /** propメソッドで変更 */ $('.hoge').prop('margin', '30px'); |
この例だと要素の背景色が青、文字色が白、マージンが30pxが適用されると思いがちです。
しかし実際は最後に prop で指定したマージン30pxしか適用されません。
というか prop で上書きされてしまうので、cssメソッドでの変更はなかったことになります。
こういう風に prop とか attr を使った場合は
今までのCSSの変更を全て上書きして消去してしまう
ということに要注意です。
一応 prop や attr でもCSS指定できますが、あまり使わない方が安全かもしれません。
jQueryからCSSプロパティを変更するには
ここまでで説明したのがCSSプロパティをjQueryから変更する方法
ですがプロパティ値を変更するだけでなく取得する方法も当然あります。
そのために使えるのが次の２つのメソッド
- cssメソッド
- attrメソッド
今紹介した css とか attr は値を取得するにも使えるものです。
メソッドを使った取得方法やコード例については次でまとめました。
変更方法のついでに取得する方法も知っておくとコードが書きやすくなるはずです。
ここまでのまとめ
ということjQueryでCSSを操作する方法（メソッド）まとめ
- cssメソッド
要素にCSSプロパティを新規追加する。もしプロパティが既にある場合は上書き
こちらは個別のプロパティを変更するだけなのでCSS全体には影響なし - attrまたはpropメソッド
要素のCSS全体を上書きするために使うことが可能
ただし呼び出し前の全ての変更が消去されてしまう点に要注意！
一応propとattrメソッドでのやり方も紹介しましたが、基本はcssメソッドを使いましょう。
ではでは($・・)/~~~
