2025-03-23 07:00:00

重要的样式

标题很好地概括了它。

外部样式表有以下代码:

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

我试过使用:

element.style.display = "inline";

and

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

但两者都不奏效。是否可以使用javascript重写!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.将重要的参数添加到已经呈现的样式属性中,传递空字符串。

2.为所有属性添加重要的参数,不要传递任何东西。它将把所有属性设置为重要属性。

这是它的现场表演。http://codepen.io/agaase/pen/nkvjr

其他回答

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)

如果您所做的只是向页面添加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

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

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

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

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

在元素上设置一个"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');