PHP循环中修改CSS变量无法实现差异化样式，求解决方案

核心问题原因 #

• 浏览器渲染机制：浏览器会先解析完整的文档片段、执行所有嵌入脚本后，才会触发页面渲染。你在循环中修改全局:root上的CSS变量--x，虽然脚本执行时变量确实被修改，但所有.my-class元素都会在所有脚本执行完成后才读取变量值，最终全部使用最后一次设置的--x值。
• 全局CSS变量特性：:root上的变量是全局共享的，所有使用该变量的元素都会继承这个值，无法为单个元素单独绑定不同的全局变量值。

关于“强制HTML在特定节点渲染” #

无法强制浏览器在HTML的特定节点即时渲染。浏览器的渲染时机由内部机制决定，通常是在解析完当前文档片段、执行完所有阻塞脚本后才会触发渲染，插入中间脚本只会阻塞解析，不会触发局部渲染。

替代实现方案 #

方案1：直接设置内联样式（最推荐） #

无需依赖CSS变量，在PHP循环中直接为每个元素设置内联width样式，每个元素的宽度完全独立，不受全局变量影响。

示例PHP代码：

<div class="wrapper">
  <?php foreach ($dbData as $item): ?>
    <div class="my-class" style="width: calc(100% * <?php echo $item['ratio']; ?>)">
      <?php echo $item['percentage']; ?>%
    </div>
  <?php endforeach; ?>
</div>

对应CSS（无需--x变量）：

.wrapper {
  background-color: lightgreen;
  width: 200px;
  height: 200px;
  text-align: center;
}

.my-class {
  background-color: darkgreen;
  color: white;
  margin-bottom: 2%;
  height: 23%;
}

方案2：使用局部CSS变量 #

不给:root设置全局变量，而是为每个.my-class元素单独设置局部--x变量，利用CSS变量的继承特性，让每个元素读取自己的局部变量值。

示例PHP代码：

<div class="wrapper">
  <?php foreach ($dbData as $item): ?>
    <div class="my-class" style="--x: <?php echo $item['ratio']; ?>">
      <?php echo $item['percentage']; ?>%
    </div>
  <?php endforeach; ?>
</div>

对应CSS（保留原有写法）：

.my-class {
  background-color: darkgreen;
  color: white;
  margin-bottom: 2%;
  width: calc(100% * var(--x));
  height:23%;
}

（可去掉:root的--x定义，或保留作为默认值）

方案3：动态生成类名（适合固定比例场景） #

如果比例值是固定的几个选项（如20%、40%等），可以在PHP循环中为每个元素生成对应的类名，提前在CSS中定义好这些类的样式。

示例CSS：

.my-class.w-20 { width: 20%; }
.my-class.w-40 { width: 40%; }
.my-class.w-60 { width: 60%; }
.my-class.w-80 { width: 80%; }

示例PHP代码：

<div class="wrapper">
  <?php foreach ($dbData as $item): ?>
    <div class="my-class w-<?php echo $item['percentage']; ?>">
      <?php echo $item['percentage']; ?>%
    </div>
  <?php endforeach; ?>
</div>

这种方案适合比例值有限的场景，若比例是任意小数，前两种方案更灵活。

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