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

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

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

.example{
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab;
}

.example{

cursor: -webkit-grab;

cursor: -moz-grab;

cursor: grab;

}

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

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

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

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

$(function(){
  $('.example').css({
    'cursor': '-webkit-grab',
    'cursor': '-moz-grab',
    'cursor': 'grab'
  });
});

$(function(){

$('.example').css({

'cursor': '-webkit-grab',

'cursor': '-moz-grab',

'cursor': 'grab'

});

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

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

このページの目次

方法１．attrメソッドでstyle属性を変更する
方法２．動的にCSSクラスを付与するやり方
ここまでのまとめ

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

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

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

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

<div class="example">ほにゃらら</div>

1	<div class="example">ほにゃらら</div>

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

var style_cursor = [
  'cursor: -webkit-grab;',
  'cursor: -moz-grab;',
  'cursor: grab;'
];
$('.example').attr(
  'style', style_cursor
);

var style_cursor = [

'cursor: -webkit-grab;',

'cursor: -moz-grab;',

'cursor: grab;'

];

$('.example').attr(

'style', style_cursor

);

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

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

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

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

/** 現在のstyle属性値を取得 */
var style_now 
  = (s = $('.example').attr('style')) ? s : '';
/** 追加したいCSSを用意 */
var style_cursor = [
  'cursor: -webkit-grab;',
  'cursor: -moz-grab;',
  'cursor: grab;'
];
/** style属性にCSS追加 */
$('.example').attr(
  'style', 
  style_now + style_cursor
);

/** 現在のstyle属性値を取得 */

var style_now

= (s = $('.example').attr('style')) ? s : '';

/** 追加したいCSSを用意 */

var style_cursor = [

'cursor: -webkit-grab;',

'cursor: -moz-grab;',

'cursor: grab;'

];

/** style属性にCSS追加 */

$('.example').attr(

'style',

style_now + style_cursor

);

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

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

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

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

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

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

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

まず次のようなCSSを用意

.cursor-grab{
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab;
}

.cursor-grab{

cursor: -webkit-grab;

cursor: -moz-grab;

cursor: grab;

}

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

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

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

$(function(){
  $('.example').addClass('cursor-grab');
});

$(function(){

$('.example').addClass('cursor-grab');

});

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

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

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

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

$(function(){
  $('.example').addClass('cls1 cls2 cls3');
});

$(function(){

$('.example').addClass('cls1 cls2 cls3');

});

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

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

ここまでのまとめ

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

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

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

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