标题很好地概括了它。
外部样式表有以下代码:
td.EvenRow a {
display: none !important;
}
我试过使用:
element.style.display = "inline";
and
element.style.display = "inline !important";
但两者都不奏效。是否可以使用javascript重写!important样式?
这是一个油猴扩展,如果这使差异。
标题很好地概括了它。
外部样式表有以下代码:
td.EvenRow a {
display: none !important;
}
我试过使用:
element.style.display = "inline";
and
element.style.display = "inline !important";
但两者都不奏效。是否可以使用javascript重写!important样式?
这是一个油猴扩展,如果这使差异。
当前回答
基于@Premasagar的精彩回答;如果你不想删除所有其他的内联样式,可以使用这个
//accepts the hyphenated versions (i.e. not 'cssFloat')
addStyle(element, property, value, important) {
//remove previously defined property
if (element.style.setProperty)
element.style.setProperty(property, '');
else
element.style.setAttribute(property, '');
//insert the new style with all the old rules
element.setAttribute('style', element.style.cssText +
property + ':' + value + ((important) ? ' !important' : '') + ';');
}
不能使用removeProperty(),因为它不会删除Chrome中的重要规则。 不能使用元素。style[property] = "因为它在FireFox中只接受camelCase。
其他回答
如果您所做的只是向页面添加css,那么我建议您使用Stylish插件,并编写用户样式而不是用户脚本,因为用户样式更有效和合适。
有关如何创建用户样式的信息,请参阅此页
这样我们就有了从CSS中删除属性值的另一种可能性。
比如在js中使用replace方法。但是你必须确切地知道样式的ID,或者你可以写一个for循环来检测(计数页面上的样式,然后检查是否有任何“包含”或“匹配”一个!重要的值。你也可以计算它们包含了多少,或者只是简单地写一个全局的[regexp: /str/gi]替换方法)
我的很简单,但我附加了一个jsBin,例如:
https://jsbin.com/geqodeg/edit?html,css,js,output
首先,我在CSS中将主体背景设置为黄色!重要的是,然后我用JS重写为深粉色。
您可以使用几个简单的一行程序来完成此任务。
在元素上设置一个"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');
而不是注入样式,如果你通过java脚本注入一个类(例如:'show'),它将工作。但这里你需要像下面这样的css。添加的类CSS规则应该在原始规则的下面。
td.EvenRow a{
display: none !important;
}
td.EvenRow a.show{
display: block !important;
}
基于@Premasagar的精彩回答;如果你不想删除所有其他的内联样式,可以使用这个
//accepts the hyphenated versions (i.e. not 'cssFloat')
addStyle(element, property, value, important) {
//remove previously defined property
if (element.style.setProperty)
element.style.setProperty(property, '');
else
element.style.setAttribute(property, '');
//insert the new style with all the old rules
element.setAttribute('style', element.style.cssText +
property + ':' + value + ((important) ? ' !important' : '') + ';');
}
不能使用removeProperty(),因为它不会删除Chrome中的重要规则。 不能使用元素。style[property] = "因为它在FireFox中只接受camelCase。