重写！重要的风格
标题几乎总结起来。
外部样式表具有以下代码：
td.EvenRow a{ display: none !important; } 我曾尝试使用：
element.style.display = "inline";
和
element.style.display = "inline !important";
但都不起作用。 是否有可能重写！重要的风格使用JavaScript。
这是为了延长油门钥匙，如果这有所作为。
我相信唯一的方法来做到这一点，它添加样式作为一个新的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;}')
使用上述方法添加的规则将（如果您使用！重要的后缀）覆盖其他以前设置的样式。 如果你不使用后缀，那么一定要把“ 特殊性 ”这个概念考虑进去。
有几个简单的单线可以用来做到这一点。
1）在元素上设置一个“style” 属性 ：
element.setAttribute('style', 'display:inline !important');
要么…
2）修改style对象的cssText属性：
element.style.cssText = 'display:inline !important';
要么做这项工作。
===
顺便说一句 – 如果你想要一个有用的工具来操纵元素中的!important规则，我写了一个名为“important”的jQuery插件： http : //github.com/premasagar/important
element.style有一个setProperty方法，可以将优先级作为第三个参数：
element.style.setProperty("display", "inline", "important")
它不适用于旧的IE浏览器，但在目前的浏览器中应该没问题 。
以@ Premasagar的杰出答案为基础; 如果您不想删除所有其他内联样式，请使用此选项
//accepts the hyphenated versions (ie 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()因为它不会删除!important Chrome中的!important规则。
不能使用element.style[property] = ''因为它只接受在FireFox中的camelCase。
我刚刚发现的更好的方法：试着比你的select器更具体的页面CSS。 我今天只需要这样做，它就像一个魅力！ 有关W3C网站的更多信息： http ： //www.w3.org/TR/CSS2/cascade.html#specificity
如果你正在做的是添加CSS的页面，那么我会build议你使用时尚的插件，并写一个用户风格，而不是一个用户脚本，因为用户风格更有效和适当。
请参阅此页面，其中包含有关如何创build用户样式的信息
https://developer.mozilla.org/en-US/docs/Web/CSS/initial
在css3中使用初始属性
<p style="color:red!important"> this text is red <em style="color:initial"> this text is in the initial color (eg black) </em> this is red again </p>
https://jsfiddle.net/xk6Ut/256/
在JavaScript中覆盖CSS类的一个select是使用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 Element style属性中更新/添加单个样式，你可以使用这个函数：
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 + ";"; } }
所有主stream浏览器都支持 style.cssText 。
用例示例：
var elem = document.getElementById("elementId"); setCssTextStyle(elem, "margin-top", "10px !important");
这里是演示的链接
下面是使用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.只要将重要的参数添加到已有的样式属性中传递空string即可。
2.为所有属性添加重要的参数不传递任何东西。 它将把所有的属性设置为重要的。
