压倒一切!重要的风格

Question

标题几乎总结了它.

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

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

我尝试过使用:

element.style.display = "inline";

和

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

但都不起作用.是否可以使用javascript覆盖!important样式.

如果这会产生影响,那么这就是一个关键的扩展.

Answer 1

您可以使用几个简单的单行来完成此操作.

1)在元素上设置"style" 属性:

element.setAttribute('style', 'display:inline !important');

要么...

2)修改对象的cssText属性style:

element.style.cssText = 'display:inline !important';

要么做好这个工作.

===

顺便说一句 - 如果你想要一个有用的工具来操作!important元素中的规则,我写了一个名为"important"的jQuery插件:http://github.com/premasagar/important

Answer 2

element.style有一个setProperty方法可以优先作为第三个参数:

element.style.setProperty("display", "inline", "important")

它在旧的IE中不起作用,但它在当前的浏览器中应该没问题.

Answer 3

我相信这样做的唯一方法就是将样式添加为带有'!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后缀)将覆盖其他先前设置的样式.如果您没有使用后缀,请务必考虑" 特异性 " 等概念.

Answer 4

您可以使用：

element.style.setProperty("display", "inline", "important");

https://developer.mozilla.org/zh-CN/docs/Web/API/CSSStyleDeclaration/setProperty