web-dev-qa-db-ja.com

「！important」ルールを使用してスタイルを挿入できない

私はこのコードを使用してスタイルを注入しようとしました：

document.body.style.color='green!important';

CSSカスケードref ごとに、!importantルールを適用することで、Originと特異性に勝ちます。

Firefox Firebugを使用してwww.google.comにこれを挿入しようとしましたが、運はありません。

!importantルールを使用して前景色を挿入するにはどうすればよいですか？

javascriptcssfirefoxdom
46
android_baby

仕様に従って、値だけでなく優先度を設定する場合は、setPropertyを次のように使用する必要があります。

document.body.style.setProperty ("color", "green", "important");
98
Boris Zbarsky
element.style.cssText = 'color:green !important';

あなたのために働くはずです。

8
Jayachandran

すべての答えは素晴らしいですが、属性のvalueがfixedであると仮定しています。

私の解決策を見てください

_this.style.setProperty("color", $(this).css('color'), "important");
_

_hand writing_値ではなく、jquery $(this).css('attr')を使用して取得しました

2
Basheer AL-MOMANI

style.cssTextは、！importantを追加する唯一の方法です。

<script>
   document.body.style.cssText='color: red !important;'
</script>
1
VISHNU Radhakrishnan

Bodyタグの変更は特定の十分な要素、クラス、または必要なものを作成するためのものではないため、コードのエラー（スペースを除く）が原因であまり機能していない可能性があります効果。

たとえば、検索結果のページテキストのクラスは「st」です。すべての検索結果は、それぞれ<li> 鬼ごっこ。

そのため、このような効果をもたらすコードは次のようになります。

var arr = document.getElementsByClassName('st');
for(i=0; i<arr.length; i++){
    arr[i].style.color="green";
}
1
Ahren Bader-Jarvis

これだけを使用してください：

document.body.style.color="green";

このように重要なものを使用する必要はありません。とにかくFatalが指摘したように、CSSスタイルシートに直接重要なルールがある場合、これは機能しません。オーバーライドする必要があります。

そのように、スタイルシートを動的に作成し、頭の中でそれを広告する必要があります：

function addNewStyle(newStyle) {
   var styleElement = document.getElementById('styles_js');
   if (!styleElement) {
       styleElement = document.createElement('style');
       styleElement.type = 'text/css';
       styleElement.id = 'styles_js';
       document.getElementsByTagName('head')[0].appendChild(styleElement);
   }
   styleElement.appendChild(document.createTextNode(newStyle));
}

次に、そのようにスタイルを更新できます

addNewStyle('body {color:green !important;}')
1
Marian Bazalik