Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Meter optimum Property

  • Difficulty Level : Basic
  • Last Updated : 14 Sep, 2021

The DOM Meter optimum Property in HTML DOM is used to set or return the value of the optimum attribute in a gauge. The optimum attribute in HTML indicates the optimal numeric value for the gauge. 
It must be within the range i.e between min and max. When it is used with the low and high attribute, it gives an indication where along the range is considered preferable.
Syntax: 

  • It returns the optimum property.
    meterObject.optimum
  • It is used to set the optimum property.
    meterObject.optimum = number

Property Values: It contains a numeric value which specifies the floating point number that is the optimum value of the gauge.
Return Values: It returns a numeric value which represents the floating point number that is the optimum value of the gauge. 
Example-1: This Example returns a optimum Property
 




<!DOCTYPE html>
<html>
  
<head>
    <title>
      DOM Meter optimum Property
  </title>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>
      DOM Meter optimum Property:
  </h2>
  
    <!-- assigning id to meter with 
        properties. -->
    <meter value="0.6" 
           max="0.9"
           min="0.1" 
           id="GFG" 
           optimum="0.6" 
           high="0.5"
           low="0.2">
  </meter>
  
    <br>
    <br>
    <button onclick="Geeks()">
        Submit
    </button>
  
    <p id="sudo" 
       style="font-size:25px;
              color:green;">
  </p>
  
    <script>
        function Geeks() {
  
            // Accessing 'meter' tag. 
            var g =
                document.getElementById(
                  "GFG").optimum;
            
            document.getElementById(
              "sudo").innerHTML = g;
        }
    </script>
  
</body>
  
</html>

Output: 
Before Clicking On Button: 
 

After Clicking On Button: 
 



Example-2 : This Example sets the optimum Property
 




<!DOCTYPE html>
<html>
  
<head>
    <title>
      DOM Meter optimum Property
  </title>
</head>
  
<body>
    <h1>
      GeeksforGeeks
  </h1>
    <h2>
      DOM Meter optimum Property:
  </h2>
  
    <!-- assigning id to meter with 
        properties. -->
    <meter value="0.6"
           max="0.9"
           min="0.1" 
           id="GFG"
           optimum="0.6"
           high="0.5" 
           low="0.2">
  </meter>
  
    <br>
    <br>
    <button onclick="Geeks()">
        Submit
    </button>
  
    <p id="sudo" 
       style="font-size:25px;
              color:green;">
  </p>
  
    <script>
        function Geeks() {
  
            // Accessing 'meter' tag. 
            var g =
                document.getElementById(
                  "GFG").optimum = "0.8";
            
            document.getElementById(
              "sudo").innerHTML = 
              "The value of the optimum attribute"+
              " was changed to " + g;
        }
    </script>
  
</body>
  
</html>

Output: 
Before Clicking On Button: 
 

After Clicking On Button: 
 

Supported Browsers: 
 

  • Google Chrome
  • Mozilla Firefox
  • Safari
  • Opera

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :