Computer >> Máy Tính >  >> Lập trình >> HTML

Thuộc tính cao của HTML DOM Meter

Thuộc tính high của HTML DOM Meter trả về / đặt một số tương ứng với thuộc tính high của yếu tố. Sử dụng điều này với các thuộc tính thấp, tối thiểu và tối đa để có kết quả tốt hơn.

Cú pháp

Sau đây là cú pháp -

  • Giá trị trả về cao tài sản
meterElementObject.high
  • Giá trị cao bộ tài sản
meterElementObject.high = number

Ví dụ

Hãy để chúng tôi xem một ví dụ cho Mét cao tài sản -

<!DOCTYPE html>
<html>
<head>
<title>Meter high</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-high</legend>
<label for="paulaLifeSource">Paula's Health Risk: </label>
<meter id="paulaLifeSource" max="100" min="0" high="80" low="70" value="85"></meter>
<input type="button" onclick="lifeSource()" value="Medi Kit">
<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.high;
      paulaLifeSource.high = 90;
      divDisplay.textContent = 'Immunity increased to '+paulaLifeSource.high+' from '+Immunity;
   }
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Trước khi nhấp vào ‘Bộ công cụ Medi’ nút -

Thuộc tính cao của HTML DOM Meter

Sau khi nhấp vào ‘Medi Kit’ nút -

Thuộc tính cao của HTML DOM Meter