<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：非標準偽元素