更改CSS样式表的选择器'属性

时间:2018-04-26 07:12:27

标签: javascript css class

以下是我们传统上如何改变经常性元素的风格。

将样式应用于每个元素

function changeStyle(selector, prop, val) {
  var elems = document.querySelectorAll(selector);
  Array.prototype.forEach.call( elems, function(ele) {
    ele.style[prop] = val;
  });
}

changeStyle('.myData', 'color', 'red');

使用类取代现有的样式

function addClass(selector, newClass) {
  var elems = document.querySelectorAll(selector);
  for (let i=0; i<elems.length; i++) {
    elems[i].classList.add(newClass);
  };
}

addClass('.myData', 'redText');

相反,我想改变实际样式表的选择器&#39;属性(例如直接修改类)。我不想循环遍历与我的选择器匹配的元素并直接应用CSS,也不想在元素中添加修饰符类。

1 个答案:

答案 0 :(得分:0)

  1. 使用外部样式表
  2. 在页面上确定其订单
  3. 修改规则的属性
  4. 以下是如何做到这一点:

    // ssMain is the stylesheet's index based on load order. See document.styleSheets. E.g. 0=reset.css, 1=main.css.
    var ssMain = 1;
    var cssRules = (document.all) ? 'rules': 'cssRules';
    
    function changeCSSStyle(selector, cssProp, cssVal) {
    
      for (i=0, len=document.styleSheets[ssMain][cssRules].length; i<len; i++) {
    
        if (document.styleSheets[ssMain][cssRules][i].selectorText === selector) {
          document.styleSheets[ssMain][cssRules][i].style[cssProp] = cssVal;
          return;
        }
      }
    }
    

    确保您要修改的规则已存在于CSS文件中,并且处于正确的级联顺序,即使它们是空的。否则,如果选择器没有规则,则必须使用document.styleSheets[index].insertRule(),您必须指定规则列表中应插入规则的位置。

    changeCSSStyle('.warning', 'color', 'red');
    changeCSSStyle('td.special', 'fontSize', '14px');