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

Question

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

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

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

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

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

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

44

追加された 27 10月 2011 〜で 05:39 著者 android_baby 編集された 15 5月 2012 〜で 10:21

ビュー: 37

源

ro ru fr es pt de zh hi bn ar kk uz be tr uk

あなたはスペースで試しましたか？

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

追加された 27 10月 2011 〜で 05:42, 著者 Esailija, 源

6 答え

著者 Boris Zbarsky · Answer 1 · 2011-10-27T08:05Z

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

document.body.style.setProperty ("color", "green", "important");

91

追加された 27 10月 2011 〜で 08:05 著者 Boris Zbarsky

源

IE9 +のみ。どうやら、あなたはsetAttributeを

追加された 19 9月 2014 〜で 11:03, 著者 RTF, 源

@ BoltClock、仕様は？

追加された 14 4月 2017 〜で 10:05, 著者 Pacerier, 源

@RTF：インプリメンテーションが正しいと仮定すると、！important は合法的にインラインスタイル宣言に現れることができます。

追加された 26 4月 2015 〜で 08:13, 著者 BoltClock, 源

@Pacerier：css-style-attrは、残りのCSSで使用されているのと同じ文法に従います。

追加された 14 4月 2017 〜で 10:40, 著者 BoltClock, 源

@RTF msdn.microsoft.com/ IE8は setAttribute をサポートするように見えますが、IE8は setAttribute

追加された 26 4月 2015 〜で 08:13, 著者 TylerH, 源

著者 Jayachandran · Answer 2 · 2013-10-02T04:43Z

element.style.cssText = 'color:green !important';

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

8

追加された 02 10月 2013 〜で 04:43 著者 Jayachandran

源

@guariによって与えられたメソッド（つまり、 ... + = ... ）は、スタイルの優先度を "！important"にアップグレードする場合にのみ機能します。一方、 '！important'からのダウングレードは失敗します。 element.style.cssText + = 'color：blue！important' が機能する間、 element.style.cssText + = 'color：blue'

追加された 06 7月 2018 〜で 10:45, 著者 codechimp, 源

要素に他のスタイルがある場合は、

element.style.cssText + = ';
color：green！important;

などのスタイルを連結するだけで、 cssTextをサポートするブラウザでも安全です。 プロパティ！ :)

追加された 08 2月 2017 〜で 06:57, 著者 guari, 源

これは、要素に他のスタイルが設定されていない場合に機能します。そうでなければ、要素の他のスタイルを上書きして失います。

追加された 29 9月 2016 〜で 03:00, 著者 robocat, 源

著者 Basheer AL-MOMANI · Answer 3 · 2016-10-18T09:38Z

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

私の解決策を見て

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

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

著者 Marian Bazalik · Answer 4 · 2011-10-27T06:06Z

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

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;}')

著者 VISHNU Radhakrishnan · Answer 5 · 2016-08-22T01:04Z

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

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

1

追加された 22 8月 2016 〜で 01:04 著者 VISHNU Radhakrishnan

源

著者 Ahren Bader-Jarvis · Answer 6 · 2011-10-27T06:37Z

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

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

タグ。

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

var arr = document.getElementsByClassName('st');
for(i=0; i

1

追加された 27 10月 2011 〜で 06:37 著者 Ahren Bader-Jarvis

源

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

追加された 29 10月 2011 〜で 10:26, 著者 android_baby, 源