私はスタイルに "重要な"ルールを挿入できません

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

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

CSSカスケードリファレンスに従って、！important ルール私は起源と特異性を奪うことができます。

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

フォアグラウンドカラーを重要なルールで挿入するにはどうすればよいですか？

44
追加された 編集された
ビュー: 55
源
あなたはスペースで試しましたか？ document.body.style.color = "green！important";
追加された 著者 Esailija, 源

6 答え

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

document.body.style.setProperty ("color", "green", "important");
91
追加された
源
IE9 +のみ。どうやら、あなたはsetAttributeを
追加された 著者 RTF, 源
@ BoltClock、仕様は？
追加された 著者 Pacerier, 源
@RTF：インプリメンテーションが正しいと仮定すると、！important は合法的にインラインスタイル宣言に現れることができます。
追加された 著者 BoltClock, 源
@Pacerier：css-style-attrは、残りのCSSで使用されているのと同じ文法に従います。
追加された 著者 BoltClock, 源
@RTF msdn.microsoft.com/ IE8は setAttribute をサポートするように見えますが、IE8は setAttribute
追加された 著者 TylerH, 源 
element.style.cssText = 'color:green !important';

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

8
追加された
源
@guariによって与えられたメソッド（つまり、 ... + = ... ）は、スタイルの優先度を "！important"にアップグレードする場合にのみ機能します。一方、 '！important'からのダウングレードは失敗します。 element.style.cssText + = 'color：blue！important' が機能する間、 element.style.cssText + = 'color：blue'
追加された 著者 codechimp, 源
要素に他のスタイルがある場合は、 element.style.cssText + = '; color：green！important; などのスタイルを連結するだけで、 cssTextをサポートするブラウザでも安全です。 プロパティ！ :)
追加された 著者 guari, 源
これは、要素に他のスタイルが設定されていない場合に機能します。そうでなければ、要素の他のスタイルを上書きして失います。
追加された 著者 robocat, 源

すべての回答は素晴らしいですが、属性の値は固定であると仮定しています

私の解決策を見て

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

instead of hand writing the value, I got it using jQuery $(this).css('attr')

2
追加された
源

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

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

このように重要なことを使う必要はありません。とにかく致命的だと指摘したが、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
追加された
源
これは、ID-Selectorと！重要なCSSスタイルによって打ち負かされます。 HTML： <body id = "illwin" style = "color：green;">これはテストです！ </body> CSS： #illwin {color：red！important; }これは赤い色のテキストになります。 jsfiddle.net/C6zH2
追加された 著者 Fabian Barney, 源

style.cssTextを追加する唯一の方法は重要です！

<script>
   document.body.style.cssText='color: red !important;'
</script>
1
追加された
源

私はそれがコードのエラー（スペースを除く）のせいではなく、bodyタグの変更が特定の要素、クラス、またはあなたが望むものを作成するためのものではないためにうまくいくとは思わない効果。

たとえば、検索結果のページテキストには、「st」というクラスがあります。 すべての検索結果はそれぞれ

  • タグ。

    そのようなエフェクトのコードは次のようになります：

    var arr = document.getElementsByClassName('st');
for(i=0; i
    • 1
    追加された
    源
    ハンクスは答えをdocument.body.style.color = "green！important"に注入しようとしました。 Firebugを使用してbbc.co.ukに移動しますが、運がない:(ファイヤーバグのスタイルを見て、それは* {color：＃505050;}のためにソースに "重要な"修飾子が見えないので、 @Ahren、私は、特定のものが何であっても、ソース（ユーザーにとって重要）は他のすべてのルールを捨て去ったと思っていますか？ w3.org/TR/CSS2/cascade.html （6.4.1カスケーディング注文）＆注射した場合、重要な宣言であれば、他のすべてのCADルールを却下することになります。機能性 "：D
    追加された 著者 android_baby, 源
    JavaScript - 日本のコミュニティ
    JavaScript - 日本のコミュニティ
    2 参加者の

    日本人コミュニティのjavascript

    開く Telegram