重要的样式

标题很好地概括了它。

外部样式表有以下代码:

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

我试过使用:

element.style.display = "inline";

而且

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

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

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

278512 次浏览
小开
最佳答案

我相信做到这一点的唯一方法是添加样式作为一个新的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后缀)将覆盖之前设置的其他样式。如果你不使用后缀，那么一定要考虑到'特异性'这样的概念。

小开

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

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

它在以前的工业实验室行不通，但在当前浏览器中应该没问题。

小开

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

  1. 设定一个“风格”;元素的属性:
element.setAttribute('style', 'display:inline !important');

还是……

  1. 修改style对象的cssText属性:
element.style.cssText = 'display:inline !important';

两者都可以。

= = =

我写了一个jQuery插件叫做“important”;在元素中操作!important规则，:http://github.com/premasagar/important

= = =

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

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

例句:

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

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

看到此页面提供了有关如何创建用户样式的信息

小开

下面是使用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

小开

基于@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' : '') + ';');
}
< p > <子> 不能使用removeProperty()，因为它不会删除Chrome中的!important规则。
不能使用element.style[property] = ''，因为它在FireFox中只接受camelCase。 < / sub > < / p >
小开

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>
小开

https://jsfiddle.net/xk6Ut/256/

在JavaScript中覆盖CSS类的一个选项是为样式元素使用ID，这样我们就可以更新CSS类

function writeStyles(styleName, cssText) {
var styleElement = document.getElementById(styleName);
if (styleElement) document.getElementsByTagName('head')[0].removeChild(
styleElement);
styleElement = document.createElement('style');
styleElement.type = 'text/css';
styleElement.id = styleName;
styleElement.innerHTML = cssText;
document.getElementsByTagName('head')[0].appendChild(styleElement);
}

．．

   var cssText = '.testDIV{ height:' + height + 'px !important; }';
writeStyles('styles_js', cssText)
小开

如果你想在DOM元素样式属性中更新/添加单个样式，你可以使用这个函数:

function setCssTextStyle(el, style, value) {
var result = el.style.cssText.match(new RegExp("(?:[;\\s]|^)(" +
style.replace("-", "\\-") + "\\s*:(.*?)(;|$))")),
idx;
if (result) {
idx = result.index + result[0].indexOf(result[1]);
el.style.cssText = el.style.cssText.substring(0, idx) +
style + ": " + value + ";" +
el.style.cssText.substring(idx + result[1].length);
} else {
el.style.cssText += " " + style + ": " + value + ";";
}
}

风格。cssText是支持所有主要浏览器。

用例示例:

var elem = document.getElementById("elementId");
setCssTextStyle(elem, "margin-top", "10px !important");

这是演示的链接

小开

而不是注入样式，如果你通过java脚本注入一个类(例如:'show')，它将工作。但这里你需要像下面这样的css。添加的类CSS规则应该在原始规则的下面。

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


td.EvenRow a.show{
display: block !important;
}
小开

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

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

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

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

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


提交答案