HTML - low 屬性

HTML low 屬性用於指定一個值，該值被認為低於 meter 元素的值。當值超過下限時，顯示方式會有所不同。

它是測量範圍下限的上數值限。low 屬性的值必須大於最小值（即 min 屬性）且小於較高值和最大值（即 high 屬性、max 屬性）。

如果它不用於<meter>標籤內或小於最小值，則 low 屬性值將等於最小值。

語法

<meter low= "value"></meter>

應用於

以下列出的元素允許使用 HTML low 屬性

元素	描述
<meter>	HTML <low> 標籤用於在給定範圍內呈現資料。

HTML low 屬性示例

以下示例將說明 HTML low 屬性，以及我們應該在哪裡以及如何使用此屬性！

在 meter 標籤中定義 low 值

在以下示例中，我們將建立一個 meter 元素並設定 low 值小於 min 值。

<!DOCTYPE html>
<html lang="en">
<body>
      <h3>HTML low Attribute</h3>
      <label for="server-load">
         Room 1: Server Load
      </label> 
      <meter id="server-load" 
             value="40" 
             min="0" 
             max="100" 
             low="50" 
             high="90" 
             optimum="0.5">
      </meter>
</body>

</html>

meter 標籤的顏色取決於 low 和 value 屬性

考慮另一種情況，這裡我們將 low 屬性與 meter 標籤一起使用。在輸出中，如果 'value' 屬性的值介於 high 和 low 之間，則結果條將為綠色。

<!DOCTYPE html>
<html lang="en">

<body>
   <h3>HTML low Attribute</h3>
   <label for="server-load">
      Room 1: Server Load
   </label> 
   <meter id="server-load" 
            value="0.7" 
            min="0" 
            max="1" 
            low="0.3" 
            high="0.8">
   </meter>
   <br>
   <label for="server-load">
      Room 2: Server Load
   </label> 
   <meter id="server-load" 
            value="0.9" 
            min="0" 
            max="1" 
            low="0.3" 
            high="0.8" >
   </meter>
   <br>
   <label for="server-load">
      Room 3: Server Load
   </label> 
   <meter id="server-load" 
            value="0.2" 
            min="0" 
            max="1" 
            low="0.3" 
            high="0.8">
   </meter>
</body>

</html>

基於 low 值操作 meter 元素的值。

考慮另一種情況，我們將與 low 屬性一起執行指令碼。在這裡，使用者可以動態地增加值以達到目標。

<!DOCTYPE html>
<html lang="en">

<body>
   <p>Example of the 'low' attribute</p>
   <fieldset>
      <legend>Meter-high</legend> 
      <label for="">Rahul's Work Load</label> 
      <meter high="70" 
             low="30" 
             min="0" 
             max="100" 
             value="75" 
             id='rahul'>
      </meter>
      <br><br>
      <span id='res'>
         Above Average Workload
      </span>
      <br><br> 
      <button onclick="decrease()">
            Reduce Tasks
      </button>
   </fieldset>
   <script>
      function decrease() {
         var h = document.getElementById('rahul');
         var work = h.value;
         h.value = h.value - 10;
         var res = document.getElementById('res');
         res.innerHTML = 
         "Rahul's workload has decreased from "
         + work + " to " + h.value;
      }
   </script>
</body>

</html>

支援的瀏覽器

屬性
low	是 8.0	否	是 6.0	是 6.0	是 11.0

html_attributes_reference.htm

列印頁面