如何通过CSS基于类名中的数字变量动态设置样式？

截至2024年，纯CSS仍然没法直接提取类名里的数字作为变量使用，但有几个高效的替代方案，既能满足你用CSS管理样式的需求，又比逐个操作DOM元素靠谱得多：

方案1：JS批量生成CSS规则（首推，扩展性拉满） #

不用挨个给元素改style，而是用JS动态生成完整的CSS规则，一次性插入页面的样式表中。这种方式DOM操作极少，效率高，而且后续要加复杂样式（比如背景、hover效果、边框），直接改CSS模板就行，完全符合样式和逻辑分离的原则。

示例代码：

// 假设N是你动态获取的最大类编号
const N = 100;
const styleSheet = document.createElement('style');
let cssRules = '';

for (let k = 1; k <= N; k++) {
  const redValue = k % 256;
  cssRules += `.class${k} {
    color: rgb(${redValue}, 0, 0);
    // 这里可以随便加复杂样式，比如：
    // border: 1px solid rgb(${redValue}, 50, 50);
    // background-color: rgba(${redValue}, 0, 0, 0.1);
    // &:hover { color: rgb(${redValue}, 100, 100); }
  }`;
}

styleSheet.textContent = cssRules;
document.head.appendChild(styleSheet);

方案2：自定义数据属性+CSS变量（半CSS方案） #

给每个classK元素加一个自定义数据属性（比如data-num="k"），然后在CSS里用这个属性值计算样式。需要JS辅助设置属性，但CSS可以统一写通用规则，后续改样式只动CSS就行。

步骤1：JS给元素补全数据属性 #

// 匹配所有以class开头的类名元素
document.querySelectorAll('[class^="class"]').forEach(el => {
  // 从类名里提取数字k
  const numMatch = el.className.match(/class(\d+)/);
  if (numMatch) {
    el.dataset.num = numMatch[1];
  }
});

步骤2：CSS统一写样式+JS生成变量规则 #

如果N是动态无上限，还是用JS生成对应的CSS变量规则更高效：

const N = 100;
const styleSheet = document.createElement('style');
let cssVarRules = '';

for (let k = 1; k <= N; k++) {
  const redValue = k % 256;
  cssVarRules += `.class${k} { --red-value: ${redValue}; }`;
}

styleSheet.textContent = cssVarRules;
document.head.appendChild(styleSheet);

然后CSS只需要写一次通用样式：

[class^="class"] {
  color: rgb(var(--red-value), 0, 0);
  border-color: rgb(var(--red-value), 50, 50);
  /* 其他通用样式都放这 */
}

方案3：CSS计数器（局限性大，仅特殊场景可用） #

如果你的classK元素是按顺序排列的，且类名编号和DOM顺序完全一致，可以用CSS计数器生成数字，但这个方案兼容性和灵活性都不如前两个：

/* 给容器初始化计数器 */
.class-container {
  counter-reset: class-num 0;
}

/* 给每个元素递增计数器，并用计数器值计算颜色 */
.class-container [class^="class"] {
  counter-increment: class-num 1;
  color: rgb(counter(class-num) % 256, 0, 0);
}

注意：部分浏览器对counter()在rgb()中的支持不太稳定，而且必须依赖元素的DOM顺序，不能随意调整元素位置，所以只适合特定场景。

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