Đối tượng Meter trong HTML DOM

Giới thiệu

HTML DOM Meter Object đại diện cho phần tử <meter> trong HTML.

Lưu ý: Không dùng <meter> làm progress bar, chỉ dùng làm gauge.

Cú pháp

Tạo phần tử <meter>:

var meterObject = document.createElement("METER")

Đối tượng meterObject có các thuộc tính sau:

Ví dụ

Ví dụ tạo meter và lấy giá trị value (tương tự bài trước).

<!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: