Thuộc tính value của Meter trong HTML DOM

Giới thiệu

Thuộc tính value của Meter trong HTML DOM trả về hoặc thiết lập một số tương ứng với thuộc tính value của phần tử <meter>. Nên sử dụng kết hợp với high, low, min, max để có kết quả tốt nhất.

Lưu ý: Không dùng <meter> làm progress bar, chỉ dùng làm gauge (đồng hồ đo/độ đo).

Cú pháp

Lấy giá trị:

meterElementObject.value

Thiết lập giá trị:

meterElementObject.value = number

Ví dụ

Ví dụ giảm giá trị meter từ 85 xuống 10 khi nhấn nút.

<!DOCTYPE html> <html> <head> <title>Meter value</title> <style> 
  form { width:70%; margin: 0 auto; text-align: center; } 
  * { padding: 2px; margin:5px; } 
  input[type="button"] { border-radius: 10px; } 
</style> </head> <body> 
  <form> 
    <fieldset> 
      <legend>Meter-value</legend> 
      <label for="paulaLifeSource">Paula's Health Risk: </label> 
      <meter id="paulaLifeSource" max="100" min="0" high="80" value="75" low="70" value="85"> 
      </meter> 
      <input type="button" onclick="lifeSource()" value="Giảm"> 
      <div id="divDisplay"></div> 
    </fieldset> 
  </form> 
  <script> 
    var divDisplay = document.getElementById("divDisplay"); 
    divDisplay.textContent = 'Life Source at ' + paulaLifeSource.value; 
    function lifeSource(effect){ 
      var paulaLifeSource = document.getElementById("paulaLifeSource"); 
      var Immunity = paulaLifeSource.value; 
      paulaLifeSource.value = 10; 
      divDisplay.textContent = 'value changed to ' + paulaLifeSource.value + ' from ' + Immunity; 
    } 
  </script> </body> </html>

Kết quả

Trước khi nhấn Giảm:

Sau khi nhấn Giảm: