meter
简介
<meter>
标签是一个行内元素,表示指示器,用来显示已知范围内的一个值,很适合用于任务的当前进度、磁盘已用空间、充电量等带有比例性质的场合。 浏览器通常会将其显示为一个不会滚动的指示条。
属性 | 值 | 说明 |
---|---|---|
min | number | 范围的下限 |
max | number | 范围的上限 |
value | number | 当前值,必须在min 属性和max 属性之间 |
low | number | 表示“低端”的上限门槛值,必须大于min 属性,小于high 属性和max 属性。如果省略,则等于min 属性 |
high | number | 表示“高端”的下限门槛值,必须小于max 属性,大于low 属性和min 属性。如果省略,则等于max 属性 |
optimum | number | 指定最佳值,必须在min 属性和max 属性之间。它应该与low 属性和high 属性一起使用,表示最佳范围。如果optimum 小于low 属性,则表示“低端”是最佳范围;如果大于high 属性,则表示“高端”是最佳范围;如果在low 和high 之间,则表示“中间地带”是最佳范围。如果省略,则等于min 和max 的中间值。 |
Chrome 浏览器使用三种颜色,表示指示条所处的位置。较好情况时,当前位置为绿色;一般情况时,当前位置为黄色;较差情况时,当前位置为红色。 上面代码中,指示条可以分成三段:0 ~ 32,33 ~ 65,66 ~ 100。由于
optimum
属性是80
,因此66 ~ 100
是较好情况,33 ~ 65
是一般情况,0 ~ 32
是较差情况。浏览器因此会根据value
属性,将当前位置显示为不同颜色,小于33
时显示红色,大于65
时显示绿色,两者之间显示黄色。