点击按钮为.box类添加样式的JavaScript实现方案咨询

算力阿峰

2026-8-2

解决方案：直接修改CSS类样式的JavaScript方法

你可以通过操作文档的CSS样式表，直接修改或新增.box类的样式规则，这样所有带有.box类的元素（包括后续动态添加的）都会自动生效，无需逐个修改元素样式或添加新类。

方法一：修改现有`.box`样式规则

遍历文档中的样式表，找到已存在的.box规则并直接修改其属性：

function turnRedAndAddPadding() {
  // 遍历所有样式表
  for (const sheet of document.styleSheets) {
    try {
      // 遍历当前样式表的所有规则
      for (const rule of sheet.cssRules) {
        if (rule.selectorText === '.box') {
          // 修改样式属性
          rule.style.backgroundColor = 'red';
          rule.style.padding = '10px';
          return; // 找到目标规则后退出循环
        }
      }
    } catch (e) {
      // 忽略跨域样式表的访问错误
    }
  }
}

方法二：动态插入新样式规则

如果担心找不到现有规则，可直接向文档头部插入新的.box样式规则（优先级会覆盖原有同选择器规则）：

function turnRedAndAddPadding() {
  // 检查是否已存在动态样式表
  let dynamicStyle = document.querySelector('#dynamic-box-styles');
  if (!dynamicStyle) {
    // 创建新的style元素并添加到头部
    dynamicStyle = document.createElement('style');
    dynamicStyle.id = 'dynamic-box-styles';
    document.head.appendChild(dynamicStyle);
  }
  // 插入新的样式规则
  dynamicStyle.sheet.insertRule(
    '.box { background-color: red; padding: 10px; }',
    dynamicStyle.sheet.cssRules.length
  );
}