标题很好地概括了它。
外部样式表有以下代码:
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样式?
这是一个油猴扩展,如果这使差异。
当前回答
如果您所做的只是向页面添加css,那么我建议您使用Stylish插件,并编写用户样式而不是用户脚本,因为用户样式更有效和合适。
有关如何创建用户样式的信息,请参阅此页
其他回答
我相信做到这一点的唯一方法是添加样式作为一个新的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后缀)将覆盖之前设置的其他样式。如果你不使用后缀,那么一定要考虑到“特异性”这样的概念。
元素。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');
这样我们就有了从CSS中删除属性值的另一种可能性。
比如在js中使用replace方法。但是你必须确切地知道样式的ID,或者你可以写一个for循环来检测(计数页面上的样式,然后检查是否有任何“包含”或“匹配”一个!重要的值。你也可以计算它们包含了多少,或者只是简单地写一个全局的[regexp: /str/gi]替换方法)
我的很简单,但我附加了一个jsBin,例如:
https://jsbin.com/geqodeg/edit?html,css,js,output
首先,我在CSS中将主体背景设置为黄色!重要的是,然后我用JS重写为深粉色。
下面是使用jquery为style属性设置重要参数的代码片段。
$.fn.setFixedStyle = function(styles){
var s = $(this).attr("style");
s = "{"+s.replace(/;/g,",").replace(/'|"/g,"");
s = s.substring(0,s.length-1)+"}";
s = s.replace(/,/g,"\",\"").replace(/{/g,"{\"").replace(/}/g,"\"}").replace(/:/g,"\":\"");
var stOb = JSON.parse(s),st;
if(!styles){
$.each(stOb,function(k,v){
stOb[k] +=" !important";
});
}
else{
$.each(styles,function(k,v){
if(v.length>0){
stOb[k] = v+" !important";
}else{
stOb[k] += " !important";
}
});
}
var ns = JSON.stringify(stOb);
$(this).attr("style",ns.replace(/"|{|}/g,"").replace(/,/g,";"));
};
用法非常简单。只需传递一个包含您想设置为重要的所有属性的对象。
$("#i1").setFixedStyle({"width":"50px","height":""});
还有另外两个选择。
1.将重要的参数添加到已经呈现的样式属性中,传递空字符串。
2.为所有属性添加重要的参数,不要传递任何东西。它将把所有属性设置为重要属性。
这是它的现场表演。http://codepen.io/agaase/pen/nkvjr