JavaScriptからCSS変更する時にimportant指定するには

こういう場面に遭遇

JSから動的にCSSプロパティ指定
その中の１つにimportantをつけたい
どうやって付与する・・・？

この方法が中々分からず苦戦。

ググるとできないと書かれてる記事もありました。

でも当然そんなことはなく、
JavaScriptでCSSにimportant付与する方法はあります。

その中で一番確実な方法をまとめたいと思います。

このページの目次

style属性を全部上書きでもできるが・・・
確実で簡単なのはstyle.setPropertyを使うこと
ちなみにjQueryからimportant指定するには
ここまでのまとめ

style属性を全部上書きでもできるが・・・

まず初めに思いつくのがCSSの全上書き

▼ このメソッドを使えばstyle全体を変更できる

getAttribute() は Element インターフェイスのメソッドで、要素の指定された属性の値を返します。指定された属性が存在しない場合、値は null か "" (空文字列) のどちらかになります。詳しくは属性が存在しない場合を参照してください。

引用元　：　https://developer.mozilla.org/ja/docs/Web/API/Element/getAttribute

style属性ごと上書きするという発想です。

実際に次のようなコードを書いてみました。

▼ これでもできるものの・・・

const example = document.getElementById('example');
var styles = example.getAttribute('style');
styles += 'background: white !important';
example.setAttribute('style', styles);

const example = document.getElementById('example');

var styles = example.getAttribute('style');

styles += 'background: white !important';

example.setAttribute('style', styles);

上の例では styles += 'background: white !important' として背景を強制的に白に変更。これならstyle属性を上書きするので !important でも問題なく含められます。

でも直にCSSを追加するのは非効率に感じます。あと全体に影響を及ぼすので、記述ミスがあると全体に影響を及ぼす可能性も。あまり良さげな方法ではないかもしれません。

確実で簡単なのはstyle.setPropertyを使うこと

では確実で間違いのない方法は何か

それは style.setProperty を使うことです。

▼ このメソッドとは何か

CSSStyleDeclaration.setProperty()

The CSSStyleDeclaration.setProperty() method interface sets a new value for a property on a CSS style declaration object.

Syntax

style.setProperty(propertyName, value, priority);

引用元　：　https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty

この関数は3つの引数を取り、1番目にプロパティ名、2番目にその値を渡せます。そして3番目に優先順位として "" , undefined , "important" のいずれかを渡せます。

これを使えば確実に important を付与可能。

実際にはこういうコードを書けばOKです。

▼ １つの要素の場合のコード例

const example = document.getElementById('example');
example.style.setProperty('background', 'white', 'important');

1 2	const example = document.getElementById('example'); example.style.setProperty('background', 'white', 'important');

▼ 複数要素の場合のコード例

const examples = document.querySelectorAll('.example');
for(var i = 0; i < examples.length; i++){
  examples[i].style.setProperty('background', 'white', 'important');
}

const examples = document.querySelectorAll('.example');

for(var i = 0; i < examples.length; i++){

examples[i].style.setProperty('background', 'white', 'important');

}

これが一番分かりやすいと思います。style属性を全部上書きするのは非効率だし、こういったメソッドを使えば「動的にimportant付与してるんだね」って分かりやすいので

ちなみにjQueryからimportant指定するには

残念ながらjQueryでは直接はできません。

なので次のように工夫する必要ありです。

▼ 方法１．setPropertyから指定する

$example = $('#example');
$example[0].style.setProperty('background', 'white', 'important');

1 2	$example = $('#example'); $example[0].style.setProperty('background', 'white', 'important');

▼ 方法２．style属性全体を上書きする

$example = $('#example');
var styles = $example.attr('styles');
styles += 'background: white !important';
$example.attr('style', styles);

$example = $('#example');

var styles = $example.attr('styles');

styles += 'background: white !important';

$example.attr('style', styles);

jQueryでは $example[n-1] でn番目のDOMにアクセスできます。

▼ ちなみにjQueryオブジェとDOM要素の変換について

PisukeCode - Web開発まとめ

jQueryオブジェクトとDOM要素を互いに変換する方法

https://pisuke-code.com/convert-jquery-and-dom-to-each

JavaScriptで要素をオブジェクトとして扱う方法は主に次の２つです。 jQueryオブジェクト DOM要素(DOM Element)ライブラリを入れてjQuer内で要素を扱うときはjQueryオブジェクトが、純粋なライブラリなしのJavaScript内で要素を扱うときはDOM要素が使われます。そしてこの２つはある方法を使えば互いに変換することも可能です。ということでjQueryオブジェクトとDOM要素の変換方法について解説互いに変換する方法ここでは jQueryオブジェクト　⇒　DOM要素 DOM要素　⇒　jQueryオブジェクトに変換する方法についてコード例と一緒に紹...

方法１ではこれを使って setProperty を呼び出し、
方法２ではstyle属性全体を上書きしてます。

とりあえず２つのどちらかを使っておけばOK

ここまでのまとめ

ということで簡単に箇条書きでまとめ

愚直にやるならstyle属性の上書き
たとえば example.setAttribute('style', styles); のようにすれば !important を含めたCSSも適用できる。ただ全部のCSSを上書きなので、コード的には分かりにくい
簡単なのはstyle.setPropertyを使うこと
１つの要素に対してなら example.style.setProperty('background', 'white', 'important'); のように第３引数から指定可能。コード的にも分かりやすくてベスト（かも）