如何用JavaScript动态修改CSS中.grid.grid-radial类的规则？

我来帮你搞定这个需求——通过JS动态修改.grid.grid-radial的CSS类规则，有两种常用思路，我都给你详细拆解：

方法一：直接修改CSS样式规则本身 #

如果需要全局修改所有使用这个类的元素样式，可以直接操作浏览器解析后的CSS规则对象：

1. 定位目标样式规则 #

首先得找到.grid.grid-radial对应的规则，我们需要遍历页面的所有样式表：

function getGridRadialStyleRule() {
  // 遍历页面所有样式表
  for (const sheet of document.styleSheets) {
    try {
      // 遍历当前样式表的所有规则
      for (const rule of sheet.cssRules) {
        // 匹配目标选择器
        if (rule.selectorText === '.grid.grid-radial') {
          return rule;
        }
      }
    } catch (e) {
      // 跨域样式表会抛出权限错误，直接跳过
      continue;
    }
  }
  return null;
}

2. 修改样式规则 #

拿到规则对象后，就像操作元素style属性一样修改它的样式：

const gridRadialRule = getGridRadialStyleRule();
if (gridRadialRule) {
  // 替换背景渐变（兼容WebKit和标准语法）
  gridRadialRule.style.backgroundImage = `
    -webkit-repeating-radial-gradient(center center, rgba(200, 200, 200, .7), rgba(200, 200, 200, .7) 1px, transparent 1px, transparent 100%),
    repeating-radial-gradient(center center, rgba(200, 200, 200, .7), rgba(200, 200, 200, .7) 1px, transparent 1px, transparent 100%)
  `;
  // 额外调整渐变间距
  gridRadialRule.style.backgroundSize = '20px 20px';
}

3. 移除样式规则 #

如果想要彻底删除这个类的样式规则：

const gridRadialRule = getGridRadialStyleRule();
if (gridRadialRule) {
  const sheet = gridRadialRule.parentStyleSheet;
  const ruleIndex = Array.from(sheet.cssRules).indexOf(gridRadialRule);
  sheet.deleteRule(ruleIndex);
}

方法二：通过添加/移除预定义类（更推荐） #

如果只是针对部分元素修改样式，更符合前端最佳实践的方式是提前在SCSS里写好不同状态的样式，用JS切换类：

1. 在styles.scss中预定义多状态样式 #

.grid.grid-radial {
  // 初始样式
  background-image: -webkit-repeating-radial-gradient(center center, rgba(160, 160, 160, .6), rgba(160, 160, 160, .6) 1px, transparent 1px, transparent 100%);
  background-image: repeating-radial-gradient(center center, rgba(160, 160, 160, .6), rgba(160, 160, 160, .6) 1px, transparent 1px, transparent 100%);
}

// 修改后的样式
.grid.grid-radial.grid-radial--modified {
  background-image: -webkit-repeating-radial-gradient(center center, rgba(200, 200, 200, .7), rgba(200, 200, 200, .7) 1px, transparent 1px, transparent 100%);
  background-image: repeating-radial-gradient(center center, rgba(200, 200, 200, .7), rgba(200, 200, 200, .7) 1px, transparent 1px, transparent 100%);
  background-size: 20px 20px;
}

2. 用JS切换类 #

// 获取所有目标元素
const gridElements = document.querySelectorAll('.grid.grid-radial');

// 应用修改后的样式
gridElements.forEach(el => el.classList.add('grid-radial--modified'));

// 恢复初始样式
gridElements.forEach(el => el.classList.remove('grid-radial--modified'));

注意事项 #

• 跨域样式表限制：如果你的styles.scss是从其他域名加载的，浏览器会阻止访问它的cssRules，这时方法一就无法使用，建议把需要动态修改的样式放在同域的样式文件中。
• 性能与维护性：方法一适合全局批量修改，效率更高；方法二更模块化，样式集中在SCSS中维护，更易读易维护，推荐优先使用。

内容的提问来源于stack exchange，提问作者user8463863