More than 5 years have passed since last update.

jQuery.fn.cssはChromeとFirefoxで微妙に挙動が異なる

Posted at 2013-10-02

以下のようなHTML要素があるとします

<div id="sample" style="padding: 1px 2px 3px 4px;"></div>

これに対して、以下のようなJavaScriptを実行してみると返される値がChromeとFirefoxで微妙に異なります。

$('#sample').css('padding');

Chrome

"1px 2px 3px 4px"

Firefox

""

これは padding だけじゃなく、 margin や background などのように - をまたいで複数のCSSを一行で設定するやつ（おそらく）全てに共通する挙動です。

回避方法

純粋に全て列挙します。

$('#sample').css(['padding-top', 'padding-bottom', 'padding-left', 'padding-right']);

この場合はChromeとFirefoxで挙動が一致します。