<meter>: HTML Meter 元素

试一试

<label for="fuel">Fuel level:</label>

<meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="50">
  at 50/100
</meter>

label {
  padding-right: 10px;
  font-size: 1rem;
}

属性

此元素包含全局属性。

value

当前的数值。如果指定了最小值（min 属性）和最大值（max 属性），则此值必须介于它们之间。如果未指定或格式错误，则值为 0。如果指定了值，但不在 min 属性和 max 属性定义的范围内，则该值等于范围的最近一端。

注意： 除非 value 属性的值在 0 和 1 之间（包括边界），否则 min 和 max 属性应定义范围，以便 value 属性的值在此范围内。

min

测量范围的下限数值。如果指定了最大值（max 属性），则此值必须小于最大值。如果未指定，则最小值为 0。

max

测量范围的上限数值。如果指定了最小值（min 属性），则此值必须大于最小值。如果未指定，则最大值为 1。

low

测量范围低端的上限数值。如果指定了最小值（min 属性）、高值（high 属性）和最大值（max 属性），则此值必须大于最小值，并且小于高值和最大值。如果未指定，或小于最小值，则 low 的值等于最小值。

high

测量范围高端的下限数值。如果指定了最大值（max 属性）、低值（low 属性）和最小值（min 属性），则此值必须小于最大值，并且大于低值和最小值。如果未指定，或大于最大值，则 high 的值等于最大值。

optimum

此属性指示最优数值。它必须在范围（由 min 属性和 max 属性定义）内。当与 low 属性和 high 属性一起使用时，它指示了范围内的哪个部分被认为是首选。例如，如果它介于 min 属性和 low 属性之间，则较低的范围被认为是首选。浏览器可能会根据值是否小于或等于最优值来以不同的颜色显示 meter 条。

示例

基本示例

HTML

<p>Battery level: <meter min="0" max="100" value="75">75%</meter></p>

结果

高低范围示例

请注意，在此示例中省略了 min 属性。这是允许的，因为它将默认为 0。

HTML

<p>
  Student's exam score:
  <meter min="0" low="50" high="80" max="100" value="84">84%</meter>
</p>

结果

技术摘要

规范

浏览器兼容性

另见

• 创建垂直表单控件
• <progress>
• ::-webkit-meter-bar、::-webkit-meter-inner-element、::-webkit-meter-even-less-good-value、::-webkit-meter-optimum-value、::-webkit-meter-suboptimum-value：非标准伪元素