[解決済み] !importantスタイルのオーバーライド

質問

タイトルに要約されています。

外部スタイルシートのコードは以下の通りです。

td.EvenRow a {
  display: none !important;
}

を使ってみました。

element.style.display = "inline";

そして

element.style.display = "inline !important";

が、どちらもうまくいきません。javascriptを使用して、!importantスタイルを上書きすることは可能でしょうか？

これはgreasemonkeyの拡張機能のためです。

解決方法は？

これを行う唯一の方法は、スタイルを新しい CSS 宣言として '!important' サフィックス付きで追加することだと思います。これを行う最も簡単な方法は、新しい <style> 要素を文書の先頭に追加することです。

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('td.EvenRow a {display:inline !important;}')

上記の方法で追加されたルールは、(サフィックスに !important を使用した場合) それ以前に設定された他のスタイリングを上書きします。サフィックスを使用しない場合は、''concept''のような概念を使用するようにしてください。 特異性 を考慮に入れてください。