如何实现CSS meter元素动态value值自动绑定自定义变量--turn？

方案1：纯CSS实现（现代浏览器兼容） #

直接利用CSS attr() 函数读取meter元素的value属性，无需手动枚举所有值：

/* 替换掉你之前所有枚举的[value="x"]规则，只需要这一行 */
meter[value] ~ .meter-container {
  --turn: attr(value number, 0);
}

说明：该语法需要浏览器支持CSS attr()的类型参数，Chrome 115+、Firefox 120+、Safari 15.4+均已支持，不需要额外写JS代码。

方案2：JS实现（全浏览器兼容，最稳妥） #

用少量JS监听meter的value变化，自动同步到--turn变量，兼容性覆盖所有主流浏览器：

const speedMeter = document.getElementById('speed-meter')
const updateTurn = () => {
  const container = speedMeter.nextElementSibling || speedMeter.parentElement.querySelector('.meter-container')
  container?.style.setProperty('--turn', speedMeter.value)
}
// 初始化赋值
updateTurn()
// 监听value属性变化，自动更新
new MutationObserver(updateTurn).observe(speedMeter, { 
  attributes: true, 
  attributeFilter: ['value'] 
})

额外PHP动态渲染优化 #

如果初始值是PHP后端输出的，可以直接在渲染阶段就把初始值写到行内样式，避免页面加载初期的样式闪烁：

<?php $current_value = 68; // 你的动态速度值 ?>
<meter id="speed-meter" class="dashboard-meter" min="0" max="100" value="<?php echo $current_value ?>"></meter>
<div class="meter-container" style="--turn: <?php echo $current_value ?>">
  <!-- 速度表展示内容 -->
</div>

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