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

Thuộc tính tối đa của HTML DOM Meter

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

Cú pháp

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

  • Giá trị trả về của max tài sản
meterElementObject.max
  • Giá trị tối đa bộ tài sản
meterElementObject.max = number

Ví dụ

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

<!DOCTYPE html>
<html>
<head>
<title>Meter max</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-max</legend>
<label for="paulaLifeSource">Paula's Health Risk: </label>
<meter id="paulaLifeSource" max="100" min="0" high="80" low="60" value="70"></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+'/'+paulaLifeSource.max;
   function lifeSource(){
      var paulaLifeSource = document.getElementById("paulaLifeSource");
      var Immunity = paulaLifeSource.max;
      paulaLifeSource.max = 80;
      divDisplay.textContent = 'Life Decreased to '+paulaLifeSource.max+' 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 tối đa của HTML DOM Meter

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

Thuộc tính tối đa của HTML DOM Meter