html5中的meter标签改变颜色规则

最新推荐文章于 2025-09-23 14:18:35 发布

转载最新推荐文章于 2025-09-23 14:18:35 发布 · 9.3k 阅读

HTML5 专栏收录该内容

0 篇文章

订阅专栏

本文详细介绍了HTML5中meter标签的颜色变化规则及其应用案例。meter标签通过max、min、low、high等属性定义不同区间，并根据optimum与value值的位置来决定显示颜色。

一、meter标签改变颜色规则

meter 标签的max、min属性定义在最两边，low和high定义在中间。这样分割开了3个区：[min,low)、[low,high]，(high,max]。

最佳值 optimum 和 value 的不同决定了显示的颜色的不同。最佳值默认是1/2(min+max)。

规则：

和 optimum 值在同一个区间的 value 值，那么显示为绿色；
和 optimum 值不在同一个区间的 value 值，以optimum 所在的区间为中心，依次向左右两边的区间为黄色、红色。

注意：optimum所在区间如果是开区间，value取值为开区间的值是也是绿色。比如：optimum所在区间[min,low)，value值等于low时也是绿色。
规则具体解析如下：

最佳值 optimum所在区间是[min,low)，那么区间[min,low]绿色，(low,high]黄色，(high,max]红色；
最佳值 optimum所在区间是[low,high]，那么区间[low,high]绿色，(min,low]黄色，(high, max]黄色；
最佳值 optimum所在区间是(high,max]，那么区间[min,low]绿色，(low,high]黄色，(high,max]红色；

二、使用案例

<p>优区间划分：[0,60)，[60,90], (90,100]</p>
<p>最优59，值60<meter min="0" low="60" high="90" max="100" optimum="59" value="60"></meter></p>
<p>最优60，值60<meter min="0" low="60" high="90" max="100" optimum="60" value="60"></meter></p>
<p>最优60，值61<meter min="0" low="60" high="90" max="100" optimum="60" value="61"></meter></p>
<p>最优90，值89<meter min="0" low="60" high="90" max="100" optimum="90" value="89"></meter></p>
<p>最优90，值90<meter min="0" low="60" high="90" max="100" optimum="90" value="90"></meter></p>
<p>最优91，值90<meter min="0" low="60" high="90" max="100" optimum="91" value="90"></meter></p>

参考文章： HTML5 meter 标签理解，meter 变化颜色规则