meter 的 high 属性仅定义高值区间左端点,不触发警告;需配合 optimum 和合法数值约束才能实现视觉警告,否则颜色不会出现。

meter 的 high 属性本身不触发警告,也不定义“超标”,它只参与划分浏览器默认着色的区间边界——想靠它实现视觉警告,必须配合 optimum 和合法的数值约束,否则颜色根本不会出现。
high 不是警戒线,只是高值区间的左端点
很多人写 high="90" 是想表达“超过 90 就危险”,但实际:high 定义的是 (high, max] 这个开闭区间,value 必须严格大于 high 才算落入高值区间。value 等于 high 时,它属于中性区间(low ),不会变红或变橙。
-
high必须是数字,不能是"90%"或字符串 - 若
max="100",则high必须小于 100;设成high="100"→ 整个高值区间失效 - 若同时设了
low,则high必须严格大于low;low="85"配high="85"→ 无高值色块 - 没设
optimum时,浏览器按默认中点计算“最佳”位置,high的语义权重会被弱化,颜色倾向不稳定
警告色真正由 optimum + 区间位置共同决定
Chrome、Safari 渲染 meter 时,并不固定“高值=红色”。颜色取决于 optimum 落在哪一段:
- 当
optimum ≤ low:高值区间(high, max]显示为红色(真正接近“警告”) - 当
optimum ∈ [low, high]:高值区间显示为黄色(中性偏警示) - 当
optimum ≥ high:高值区间反而显示为绿色(表示“越接近 high 越好”) - value="95" 在
min="0" max="100" low="30" high="90" optimum="20"下是红色;但换optimum="98"就变成绿色
修改 high 后颜色不更新?DOM 属性 vs HTML 属性搞混了
直接赋值 meter.high = 85 不会触发重绘,浏览器只响应 HTML 属性变更:
- ❌ 错误:
meter.high = "85"或meter.setAttribute("HIGH", "85")(大小写敏感) - ✅ 正确:
meter.setAttribute("high", "85"),且需同步确保low和max仍满足min - 修改后建议加
meter.offsetWidth强制重排,避免样式延迟生效 - Firefox 默认几乎不渲染 low/high 分段色,仅画灰条;别只在 Chrome 测
真正要实现“超标警告”,得绕过 meter 原生限制
原生 meter 的着色逻辑不可控、不可预测,跨浏览器差异大,且无法用普通 CSS 定制。如果需要稳定、可维护的警告视觉:
- 放弃依赖
high自动着色,改用<div> + ARIA + 自定义 CSS 进度条 <li>用 JS 判断 <code>value > high后手动加 class,比如class="warning",再配background: #f44336 - 若坚持用
meter,务必在 iOS Safari、旧版 Firefox、Edge ≤18 上实测——high在这些环境可能完全静默
最易被忽略的一点:你看到的“红色警告”,大概率不是 high 单独起的作用,而是 optimum 恰好落在低侧,且 low/high/max 全部满足约束的结果。调一个值,往往要动三个。











