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

Thuộc tính thấp của HTML Meter DOM Meter

Thuộc tính Meter low trả về / đặt một số tương ứng với thuộc tính low 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à tối đa để có kết quả tốt hơn.

Cú pháp

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

  • Giá trị trả về thấp tài sản
meterElementObject.low
  • Giá trị thấp bộ tài sản
meterElementObject.low = number

Ví dụ

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

<!DOCTYPE html>
<html>
<head>
<title>Meter low</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-low</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;
   function lifeSource(){
      var paulaLifeSource = document.getElementById("paulaLifeSource");
      var Immunity = paulaLifeSource.low;
      paulaLifeSource.low = 75;
      divDisplay.textContent = 'Immunity increased to '+paulaLifeSource.low+' 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 thấp của HTML Meter DOM Meter

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

Thuộc tính thấp của HTML Meter DOM Meter