HTML high Attribute


The HTML high attribute is used with a gauge to specify the high value of that gauge. Use it with max, min, low attributes of gauge to get better results.

Let us see an example of Meter high property −

Example

 Live Demo

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

This will produce the following output −

1) Before clicking ‘Medi Kit’ button −

2) After clicking ‘Medi Kit’ button −

Updated on: 19-Sep-2019

78 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements