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

こういう場面に遭遇

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

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

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

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

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

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

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

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

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

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

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

 

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

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

上の例では 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です。

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

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

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

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

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

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

▼ 方法1.setPropertyから指定する

▼ 方法2.style属性全体を上書きする

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

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

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

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

ここまでのまとめ

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

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

以上、JSからCSSのimportant指定する方法でした。

もし間違いがあればコメントからどうぞ。ではまた

Shareこの記事をシェアしよう!

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

コメントを残す

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

CAPTCHA


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