重要的风格

Question

标题几乎总结了一下。

外部样式表具有以下代码：

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

我尝试使用：

element.style.display = "inline";

和

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

但都行不通。是否有可能使用javascript覆盖！important样式。

如果有区别的话，这是给 greasemonkey扩展的。

Answer 1

我相信这样做的唯一方法是将样式添加为带有’！important’后缀的新CSS声明。最简单的方法是将新的<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后缀）将覆盖其他先前设置的样式。如果您不使用后缀，请确保考虑“特异”之类的概念。