如何为特定元素添加CSS规则？含随机值的类创建求助

你有两种方式实现随机位置的设置，下面分别说明：

方法1：直接通过JavaScript设置元素样式（最简便） #

不用创建新的CSS类，直接用JS获取元素后，把随机计算出的top和left值赋值给元素的style属性，代码修改如下：

修改后的JavaScript代码 #

function play() {
  // 简化随机值生成：直接生成0-450之间的50倍数（适配500px容器与50px尺寸的元素）
  const getRandomPos = () => Math.floor(Math.random() * 10) * 50;

  // 获取三个障碍物元素
  const obst1 = document.getElementById('obst1');
  const obst2 = document.getElementById('obst2');
  const obst3 = document.getElementById('obst3');

  // 设置每个元素的位置
  obst1.style.top = `${getRandomPos()}px`;
  obst1.style.left = `${getRandomPos()}px`;

  obst2.style.top = `${getRandomPos()}px`;
  obst2.style.left = `${getRandomPos()}px`;

  obst3.style.top = `${getRandomPos()}px`;
  obst3.style.left = `${getRandomPos()}px`;

  // 打印坐标
  console.log(
    `(${obst1.style.left}, ${obst1.style.top}) ` +
    `(${obst2.style.left}, ${obst2.style.top}) ` +
    `(${obst3.style.left}, ${obst3.style.top})`
  );
}

修改后的HTML（补全未闭合的button标签） #

<body>
  <div class="bg">
    <div class="obst" id="obst1"></div>
    <div class="obst" id="obst2"></div>
    <div class="obst" id="obst3"></div>
  </div>
  <button onclick="play()">生成随机位置</button>
  
  <script src="script.js"></script>
</body>

简化后的CSS（移除固定位置的ID选择器） #

html, body {
  height: 100%;
  width: 100%;
  background-color: grey;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bg{
  height: 500px;
  width: 500px;
  background-color: white;
  position: relative;
}
.obst {
  background-color: red;
  height: 50px;
  width: 50px;
  position: absolute; /* 把position放到公共类，避免重复设置 */
}

方法2：动态创建包含随机值的CSS类 #

如果一定要创建带随机数值的CSS类，可以通过JS动态创建<style>标签，把类名和随机样式写入其中，再给元素添加对应的类：

JavaScript代码示例 #

function play() {
  const getRandomPos = () => Math.floor(Math.random() * 10) * 50;

  // 用时间戳生成唯一类名，避免样式冲突
  const class1 = `obst-pos-${Date.now()}-1`;
  const class2 = `obst-pos-${Date.now()}-2`;
  const class3 = `obst-pos-${Date.now()}-3`;

  // 创建style标签并写入随机样式
  const style = document.createElement('style');
  style.textContent = `
    .${class1} {
      top: ${getRandomPos()}px;
      left: ${getRandomPos()}px;
    }
    .${class2} {
      top: ${getRandomPos()}px;
      left: ${getRandomPos()}px;
    }
    .${class3} {
      top: ${getRandomPos()}px;
      left: ${getRandomPos()}px;
    }
  `;
  document.head.appendChild(style);

  // 获取元素并更新类名
  const obst1 = document.getElementById('obst1');
  const obst2 = document.getElementById('obst2');
  const obst3 = document.getElementById('obst3');

  // 移除旧的位置类，避免样式叠加
  const removeOldPosClasses = (el) => {
    el.classList.remove(...Array.from(el.classList).filter(c => c.startsWith('obst-pos-')));
  };
  removeOldPosClasses(obst1);
  removeOldPosClasses(obst2);
  removeOldPosClasses(obst3);

  // 添加新的位置类
  obst1.classList.add(class1);
  obst2.classList.add(class2);
  obst3.classList.add(class3);
}

对应的CSS（保留position: absolute在公共类） #

html, body {
  height: 100%;
  width: 100%;
  background-color: grey;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bg{
  height: 500px;
  width: 500px;
  background-color: white;
  position: relative;
}
.obst {
  background-color: red;
  height: 50px;
  width: 50px;
  position: absolute;
}

总结 #

• 方法1更简单直接，适合随机位置的一次性设置场景，无需额外管理CSS类；
• 方法2适合需要复用随机样式的场景，但要注意保证类名唯一，避免样式冲突。

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