jQueryでCSSの!important指定を行う

"cssText" による !important指定

jQueryの.css()メソッドでは

jQuery

$('#sample').css({'margin-top': '20px !important'}); // 無効

のような !important 指定は認識されません（宣言自体が無視されます）。

このような場合は、CSS書式をそのまま記述できる"cssText"を使用することで !important 指定を実現できます。

jQuery

$('#sample').css({'cssText': 'margin-top: 20px !important;'}); // 有効

"cssText" を使用する際の注意点

"cssText" による指定は対象となる要素のstyle属性を書き換える挙動となるため、HTMLのstyle属性によって指定されていたスタイルは無効となってしまいます。

下の例では、style属性で指定されていた "color: red;" が無効になっていることがわかります。

HTML

<div id="sample_01" style="color: red;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

jQuery

$('#sample_01').css({'cssText': 'margin-left: 50px;'});

意図しないスタイルの上書きを避けるためには、あらかじめstyle属性値を取得しておき "cssText" による指定値に追加するといった工夫が必要となります。

jQuery

var defaultStyle = $('#sample_01').attr('style');
$('#sample_01').css({'cssText': defaultStyle + 'margin-left: 50px;'});