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

Question

以下是我们传统上更改重复元素样式的方法。

将样式应用于每个元素

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');

相反，我想改变实际样式表的选择器属性（例如直接修改类）。我不想循环遍历与我的选择器匹配的元素并直接应用CSS，也不想向元素添加修饰符类。

- gmoz22

Answer 1

1. 使用外部样式表
2. 确定其在页面上的顺序
3. 修改规则的属性

以下是操作步骤：

// 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');

- gmoz22

---

如果您的浏览器因CORS问题而出现“未捕获的DOM异常：无法从CSSStyleSheet读取'cssRules'属性：无法访问规则”，请尝试在您的<link>标签中添加crossorigin ="anonymous"（这对于 file：//不起作用，因此您必须使用类似npx http-server的东西来托管它）。 - Yami Odymel