如何仅使用JavaScript编辑尚未应用到元素的CSS类的样式属性

数据老陈

2026-10-5

解决方案

方法1：使用CSS变量（推荐）

这是最简便的实现方案，不需要修改原有CSS类的应用逻辑，也不用操作样式表：

先调整你的CSS类，把动画时长替换为CSS变量，自带默认值即可：

.你的动画类 {
  /* 其他属性保持不变 */
  animation-duration: var(--custom-anim-duration, 1s);
  /* 如果是写在animation简写里，格式如下 */
  /* animation: 你的关键帧名 var(--custom-anim-duration, 1s) linear forwards; */
}

JS中只需要在应用类之前，给目标元素/全局根节点设置对应的变量值即可：

function changeSpeed(n) {
  // 全局统一修改所有应用该类的元素时长
  document.documentElement.style.setProperty('--custom-anim-duration', `${n}s`);
  
  // 如果只需要给特定元素单独设置时长，给对应元素赋值即可
  // const target = document.querySelector('#要应用动画的元素');
  // target.style.setProperty('--custom-anim-duration', `${n}s`);
}

方法2：直接修改样式表内的CSS类规则

如果你确实需要直接编辑还未应用的CSS类本身的定义，可以通过遍历文档样式表找到对应规则修改：

function changeSpeed(n) {
  // 遍历页面加载的所有样式表
  for (const sheet of document.styleSheets) {
    try {
      // 遍历样式表内的每一条规则
      for (const rule of sheet.cssRules) {
        // 匹配到你要修改的类选择器
        if (rule.type === CSSRule.STYLE_RULE && rule.selectorText === '.你的动画类') {
          // 修改动画时长属性
          rule.style.animationDuration = `${n}s`;
          return;
        }
      }
    } catch (err) {
      // 跨域外部样式表会触发权限报错，直接跳过即可
      continue;
    }
  }
}