是否可以运行 javascript 在循环中修改 CSS 变量并使用该变量获得不同的 CSS 结果？

Question

我正在使用 PHP 循环遍历从数据库接收的数据，并尝试通过 CSS 变量动态影响对象的宽度。 我的原型工作得很好，因为它只使用了一次迭代，我可以让 output 看起来就像我想要的那样。 一旦我添加了循环，我发现 HTML 在所有 HTML 被处理之前似乎没有被渲染。 因此，修改 CSS 变量只会为所有元素提供最后一次迭代的结果，而不是每个元素都有自己的迭代结果。

我拼凑了一段快速代码来演示我的问题。 我提醒 CSS 值，因为它们发生变化以表明它们实际上已被正确修改。

所以我的问题是：有没有办法强制 HTML 在 HTML 文件中的特定点呈现？ 如果没有，除了确定循环上限并为所有可能的迭代创建相应的 CSS 变量和 class 的蛮力方法之外，还有什么方法可以完成我正在尝试做的事情吗？

感谢您的考虑...

 :root { --x: 1; }.wrapper { background-color: lightgreen; width: 200px; height: 200px; text-align: center; }.my-class { background-color: darkgreen; color: white; margin-bottom: 2%; width: calc(100% * var(--x)); height:23%; }

 <script> // Get the root element that holds all the CSS variables var css_root = document.querySelector(':root'); // Function for getting a CSS variable value function GetCssVariable(cssVar) { // Get the styles (properties and values) for the root var root_styles = getComputedStyle(css_root); return root_styles.getPropertyValue(cssVar); } // Function for setting a CSS variable value function SetCssVariable(cssVar, val) { css_root.style.setProperty(cssVar, val); alert(cssVar + " = " + GetCssVariable(cssVar)); // debugging only } </script> <div class="wrapper"> <script>SetCssVariable('--x', 0.2);</script> <div class="my-class">20%</div> <script>SetCssVariable('--x', 0.4);</script> <div class="my-class">40%</div> <script>SetCssVariable('--x', 0.6);</script> <div class="my-class">60%</div> <script>SetCssVariable('--x', 0.8);</script> <div class="my-class">80%</div> </div>

Answer 1

你想的太复杂了：

 :root { --x: 1; }.wrapper { background-color: lightgreen; width: 200px; height: 200px; text-align: center; }.my-class { background-color: darkgreen; color: white; margin-bottom: 2%; width: calc(100% * var(--x)); height:23%; }

 <div class="wrapper"> <div class="my-class" style="--x: 0.2">20%</div> <div class="my-class" style="--x: 0.4">40%</div> <div class="my-class" style="--x: 0.6">60%</div> <div class="my-class" style="--x: 0.8">80%</div> </div>