<meter>标签是HTML5新增的标签，定义度量衡。仅用于已知最大和最小值的度量。也就是必须定义度量的范围，既可以在元素的文本中，也可以在 min/max 属性中定义。
<meter min="0" max="20">5</meter><meter>2 out of 10</meter>
<meter>30%</meter> high number 定义度量的值位于哪个点，被界定为高的值。
low number 定义度量的值位于哪个点，被界定为低的值。
max number 定义最大值。默认值是 1。
min number 定义最小值。默认值是 0。
optimum number 定义什么样的度量值是最佳的值。如果该值高于 "high" 属性，则意味着值越高越好。如果该值低于 "low" 属性的值，则意味着值越低越好。
value number 定义度量的值。
可以用CSS的伪元素对默认的显示方式处理下（因为很可能各个浏览器的显示方式不一）：
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Coolwp.net Demo</title>
<style>
.deal meter { -webkit-appearance: none }
.deal ::-webkit-meter-bar {
height: 1em
background: white
border: 1px solid black
}
.deal ::-webkit-meter-optimum-value { background: green } /* 好 */
.deal ::-webkit-meter-suboptimum-value { background: orange } /* 凑合 */
.deal ::-webkit-meter-even-less-good-value { background: blue } /* 糟糕 */
.deal ::-moz-meter-bar {
background: rgba(0,96,0,.6)
}</style>
</head>
<body>
<p>
默认的：<meter low="69" high="80" max="100" optimum="100" value="92">A</meter>
<meter low="69" high="80" max="100" optimum="100" value="72">C</meter>
<meter low="69" high="80" max="100" optimum="100" value="52">E</meter>
</p>
<p class="deal">
处理后的：<meter low="69" high="80" max="100" optimum="100" value="92">A</meter>
<meter low="69" high="80" max="100" optimum="100" value="72">C</meter>
<meter low="69" high="80" max="100" optimum="100" value="52">E</meter>
</p>
</body>
</html>
实际显示效果：
meter度量衡如何改变颜色：在meter中要想改变颜色，需要用到五个值，分别是：min（最小值）、max（最大值）、low、high、value和optimum，其中前四个值会把整个进度划分成3区间，绿色：当value和optimum值在一个区间时，它就会呈现出绿色。黄色：当optimum在high和max之间的时候，value在low和high之间，它就会呈现出黄 色当optimum在low和high之间的时候，value值在min和low之间，在high和max 之间的时候就会呈现出黄色。当optimum在min和low之间的时候，value值在low和high之间会呈现出黄色。红色：当optimum在high和max之间的时候，value值在min和low之间时就会呈现出红 色。当optimum在min和low之间的时候，value在high和max之间就会呈现出红色。当optimum在绿色区域的时候，value也在绿色区域的时候，整个就会呈现出绿色当optimum在绿色区域的时候，value值在黄色区域的时候，整个就会呈现出黄色当optimum在绿色区域的时候，value值在红色区域的时候，整个就会呈现出红色当optimum在绿色区域的时候，valu值在中间绿色区域是为绿色当optimum在绿色区域的时候，value值在min和low之间和在high和max之间时都呈现出黄色当optimum在绿色区域的时候，value也在绿色区域的时候，整个就会呈现出绿色当optimum在绿色区域的时候，value值在黄色区域的时候，整个就会呈现出黄色当optimum在绿色区域的时候，value值在红色区域的时候，整个就会呈现出红色欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）