黄色并非由low和high直接定义，而是optimum所在区间的相邻段：当optimum="35"或"85"时，40–80区间才显示黄色；low/high仅作分割点，需用setattribute修改且optimum必须合法。
low和high本身不定义“黄色警告区间”
很多人以为设 low="40" 和 high="80" 就能自动让 40–80 显示黄色，但实际不是这样：low 和 high 只是两个分割点，不直接控制颜色，更不等于“警告阈值”。黄色出现的前提是：value 落在某个区间，且该区间恰好是 optimum 所在区间的相邻段。
黄色只出现在optimum的相邻区间
浏览器根据 optimum 的位置决定哪一段是绿色（最佳），然后把紧挨着它的那段标为黄色——不是固定“中间段=黄”，而是动态匹配：
- 如果
optimum="25"且min="0" max="100" low="40" high="80"，那么 [0, 40] 是绿色，(40, 80] 是黄色，(80, 100] 是红色 - 如果
optimum="60"，那么 [40, 80] 是绿色，[0, 40) 和 (80, 100] 都是黄色 - 如果
optimum="90"，那么 (80, 100] 是绿色，[40, 80) 是黄色，[0, 40) 是红色
也就是说，想让 40–80 显黄，你得让 optimum 落在它旁边——比如设 optimum="35" 或 optimum="85"，而不是塞进中间。
必须满足 min
只要缺一环，low 和 high 就静默失效，meter 退化为单色灰条（无黄/红/绿）：
-
min="0"但low="0"→ 无效（low 必须 > min） -
max="100"但high="100"→ 高区间消失，整个三段逻辑崩塌 -
low="70"+high="50"→ 顺序反了，浏览器忽略 - 只写
low="40"不写high→ 不触发分段，无黄色
检查方式很简单：打开 DevTools，看 computed styles 里是否出现 ::-webkit-meter-inner-element 或类似伪元素；没出现，说明 low/high 没生效。
修改 low/high 必须用 setAttribute，不能直接赋值
JS 里写 meter.low = 40 或 meter.high = 80 不会重绘，颜色不会变：
- ✅ 正确：
meter.setAttribute("low", "40")、meter.setAttribute("high", "80") - ❌ 无效：
meter.low = 40、meter.high = 80、meter.dataset.low = "40"
而且每次改完都得确保 optimum 也在合法范围内，否则颜色跳变不可预测——尤其当 value 接近边界时，value === low 和 value === high 的渲染行为在 Chrome 和 Firefox 中略有差异，别依赖精确相等。
真正可控的“黄色警告”其实靠的是组合：先保证范围合法，再把 optimum 放到你想标黄的区间隔壁，最后确认 value 确实落在那个区间里。浏览器不提供“警告色开关”，只有语义区间映射——而黄色，永远是绿色的邻居。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
