2025-03-23 07:00:00

重要的样式

标题很好地概括了它。

外部样式表有以下代码:

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

我试过使用:

element.style.display = "inline";

and

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

但两者都不奏效。是否可以使用javascript重写!important样式?

这是一个油猴扩展,如果这使差异。


当前回答

元素。style有一个setProperty方法,可以将优先级作为第三个参数:

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

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

其他回答

这样我们就有了从CSS中删除属性值的另一种可能性。

比如在js中使用replace方法。但是你必须确切地知道样式的ID,或者你可以写一个for循环来检测(计数页面上的样式,然后检查是否有任何“包含”或“匹配”一个!重要的值。你也可以计算它们包含了多少,或者只是简单地写一个全局的[regexp: /str/gi]替换方法)

我的很简单,但我附加了一个jsBin,例如:

https://jsbin.com/geqodeg/edit?html,css,js,output

首先,我在CSS中将主体背景设置为黄色!重要的是,然后我用JS重写为深粉色。

如果您所做的只是向页面添加css,那么我建议您使用Stylish插件,并编写用户样式而不是用户脚本,因为用户样式更有效和合适。

有关如何创建用户样式的信息,请参阅此页

元素。style有一个setProperty方法,可以将优先级作为第三个参数:

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

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

您可以使用几个简单的一行程序来完成此任务。

在元素上设置一个"style"属性:

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

还是……

修改样式对象的cssText属性:

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

两者都可以。

===

我写了一个jQuery插件“important”来操作元素中的重要规则,:http://github.com/premasagar/important

===

编辑: 正如评论中所分享的,标准CSSOM接口(JavaScript与CSS交互的API)提供了setProperty方法:

element.style.setProperty(propertyName, value, priority);

E.g:

document.body.style.setProperty('background-color', 'red', 'important');

https://developer.mozilla.org/en-US/docs/Web/CSS/initial

在css3中使用initial属性

 <p style="color:red!important"> 
    this text is red 
       <em style="color:initial"> 
          this text is in the initial color (e.g. black)
       </em>
    this is red again
 </p>