Question

标题几乎总结了它。

外部样式表包含以下代码：

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

我尝试过使用：

element.style.display = "inline";

和

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

但不起作用。是否可以使用javascript覆盖！important样式。

如果这会产生影响，那么这就是一个关键的扩展名。

Answer 1

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

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

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

...或

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

element.style.cssText = 'display:inline !important';

要么做好这个工作。

===

BTW - 如果你想要一个有用的工具来操纵元素中的!important规则，我写了一个名为“important”的jQuery插件：http://github.com/premasagar/important

Answer 2

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

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

它didn't work in old IEs但在当前的浏览器中应该没问题。

Answer 3

我相信这样做的唯一方法就是将样式添加为带有'！important'后缀的新CSS声明。最简单的方法是添加一个新的＆lt; style＆gt;元素到文件负责人：

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后缀）将覆盖其他先前设置的样式。如果您没有使用后缀，请务必考虑“specificity”等概念。

Answer 4

您可以使用：

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

https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty

Answer 5

以@ 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中的!important规则无法使用element.style[property] = ''因为它只接受FireFox中的camelCase。

Answer 6

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

Answer 7

如果要在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 is supported for all major browsers

用例示例：

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

Here is link to demo

Answer 8

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

请参阅this page with information on how to create a user style

Answer 9

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 (e.g. black)
       </em>
    this is red again
 </p>

Answer 10

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)

Answer 11

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

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

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

Answer 12

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

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

我的很简单，但是我附上了jsBin，例如：

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

首先，我在CSS中将主体背景设置为黄色!important，然后用JS覆盖了DarkPink。

Answer 13

下面是一段代码，用于使用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

压倒一切！重要的风格

13 个答案: