jQueryで同一CSSプロパティに複数値を割り当てる方法&コード例

CSSでは同じプロパティに複数の値を設定したい場合もあります。

例えば分かりやすいのが次のようなCSS

値に -webkit-  とか -moz-  とかのベンダープレフィックスを付けたのを付与したい場合ですね。

CSSではこういう風に同じ値を上書きせずに、複数定義できます。

 

ところが、jQueryだとそういう訳にもいきません、

例えば次の cssメソッドを使って複数値を追加するコード を考えてみてください。

このコードで要素に適用されるのは cursor: grab;  だけです。その他は上書きされてしまいます。

そこで、jQueryで同一CSSプロパティに複数値を割り当てる方法とコード例をまとめました。

方法1.attrメソッドでstyle属性を変更する

まず1つめの方法はattrメソッドを使ってstyle属性に複数値を追加する方法

やり方は次のように簡単です。

 

例えば次みたいな要素があるとしましょう。

この要素の cursor  プロパティに複数値を割り当てるなら、次のコードを書けばOK

まず style_cursor  で 要素: 値  の連想配列を用意

あとはそれをattrメソッドからstyle属性に対して渡してあげればいいだけです。

 

ただし、今紹介した方法だと現在のstyle属性が全部上書きされちゃいます

なので、上書きを防ぐなら次のコードを書いた方が安全かつ確実

何をしているかはコメントを読んでもらえば大体わかると思います。

やってることは $('.example').attr('style')  で現在のCSS( style_now  )を取得し、それに対して新しいCSS( style_cursor  )を追加してるだけ

既存のスタイルを上書きしたくないなら、こっちを使うのがセーフです。

方法2.動的にCSSクラスを付与するやり方

同一プロパティい複数値を割り当てる方法はもう1つあります。

それはCSSクラスを定義しておいて、後から動的に要素に付与するという方法

そのやり方を例を使って説明すると次のような感じです。

 

まず次のようなCSSを用意

この例は cursor  プロパティに値を設定してるので、 .cursor-grab  というセレクタ名をつけてます。

取りあえず、こういう感じで適用したいスタイルを用意しておきましょう。

 

そうしたら次コードみたくjQuery側でこのCSSクラスを付与してあげるだけ

addClassメソッドを使えばクラスが付与できます。(ただし先頭のドットは不要)

こうすることで、間接的に同一プロパティに複数値が設定可能

 

ちなみに、addClassメソッドでは複数クラスを付与することもできます。

例えば次は cls1  cls2  cls3  という3つのクラスを付与するコード例

cls1 cls2 cls3  みたいにスペースで区切ってあげればOK

複数プロパティを適用するなら、この書き方を知っておくと便利かもしれません。

ここまでのまとめ

同一プロパティに複数値を設定する方法をまとめると次の通り

  • 方法1.attrメソッドからstyle属性変更
    まずプロパティを定義した連想配列を用意し、それをattrメソッドからstyle属性に対して渡してあげればOK。ただし現在のCSSを取得しておかないと上書きされることに注意!
  • 方法2.動的にCSSクラスを付与する
    あらかじめ複数値を設定するCSSクラスを用意しておき、適当なタイミングでaddClassメソッドを使うことでも複数値の設定は可能

僕自身は2番目の方法の方がスマートなので、よく使うことが多いです。(attrメソッドでゴニョゴニョやるのは少し面倒・・・)

以上、jQueryで同じCSSプロパティに複数値を設定する方法でした。ではまた($・・)/~~~

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

コメントを残す

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

CAPTCHA


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