能否动态创建CSS类？如何批量生成100个CSS类并应用到动态div

你可以通过动态创建style标签插入CSS规则的方式实现需求，完整实现逻辑如下：

实现步骤 #

• 第一步：生成100个自定义CSS类并注入到页面

// 创建style标签插入到页面头部
const styleSheet = document.createElement('style');
document.head.appendChild(styleSheet);
const cssRuleSheet = styleSheet.sheet;

// 示例动态生成背景色方法，可替换为你自己的实现逻辑
function dynamicBackgroundColor() {
  // 随机生成十六进制颜色
  return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
}

// 循环生成100个CSS类
for (let i = 0; i < 100; i++) {
  const newBackgroundColor = dynamicBackgroundColor();
  // 拼接CSS规则，类名按dynamic-class-0到dynamic-class-99的规则命名
  const rule = `.dynamic-class-${i} {
    background-color: ${newBackgroundColor};
    height: 100%;
    width: 0%;
  }`;
  // 将规则插入到样式表中
  cssRuleSheet.insertRule(rule, cssRuleSheet.cssRules.length);
}

• 第二步：动态创建div时绑定对应类

// 示例：创建100个div并绑定对应生成的CSS类
for (let i = 0; i < 100; i++) {
  const div = document.createElement('div');
  // 绑定对应序号的类
  div.className = `dynamic-class-${i}`;
  // 此处可将生成的div插入到你需要的父容器中，示例插入到body
  document.body.appendChild(div);
}

简化替代方案 #

如果你不需要复用这些CSS类，也可以直接给动态生成的div设置行内样式，不需要额外创建CSS类，逻辑更简洁：

for (let i = 0; i < 100; i++) {
  const div = document.createElement('div');
  div.style.backgroundColor = dynamicBackgroundColor();
  div.style.height = '100%';
  div.style.width = '0%';
  document.body.appendChild(div);
}

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