重要的风格

标题几乎总结了一下。

外部样式表具有以下代码：

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

我试过使用：

element.style.display = "inline";

和

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

但都行不通。是否有可能使用javascript覆盖！important样式。

如果有区别的话，这是给油猴扩展的。

我相信这样做的唯一方法是将样式添加为带有'！important'后缀的新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后缀）将覆盖其他先前设置的样式。如果您不使用后缀，请确保考虑诸如“ 特异性 ”之类的概念。

您可以使用几个简单的单线执行此操作。

1）在元素上设置“样式” 属性：

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

要么...

2）修改对象的cssText属性style：

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 (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()因为它不会删除!importantChrome 中的规则。
无法使用，element.style[property] = ''因为它仅在FireFox中接受camelCase。}

我刚刚发现的更好的方法：尝试比使用选择器的CSS页面更具体。我今天只需要这样做，它就像一个魅力！有关W3C网站的更多信息，请访问：http : //www.w3.org/TR/CSS2/cascade.html#specificity

如果要在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 + ";";
  }
}

所有主要浏览器均支持 style.cssText。

用例示例：

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

这是演示的链接

如果您要做的只是将CSS添加到页面中，那么我建议您使用时尚插件，并编写用户样式而不是用户脚本，因为用户样式更有效且更合适。

请参阅此页面，其中包含有关如何创建用户样式的信息

https://developer.mozilla.org/zh-CN/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 (e.g. black)
       </em>
    this is red again
 </p>

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

在JavaScript中覆盖CSS类的一种选择是使用style元素的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)

如果您不是通过注入样式，而是通过Java脚本注入一个类（例如：“ show”），它将起作用。但是在这里，您需要如下所示的CSS。添加的class css规则应低于您的原始规则。

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

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

我们还有另一种可能性，可以从CSS中删除属性值。

就像在js中使用replace方法一样。但是您必须确切知道样式的ID，或者您可以编写一个for循环来检测该样式（通过（在页面上计算样式），然后检查这些“包含”或“匹配” !important值中的任何一个。也-包含多少，或者只是编写一个全局[regexp：/ str / gi]替换方法）

我的很简单，但是我附上了一个jsBin：

https://jsbin.com/geqodeg/edit?html,css,js，输出

首先，我将CSS的主体背景设置为yellow !important，然后用JS替代darkPink。

以下是使用jquery设置样式属性的重要参数的代码段。

$.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