Related Articles

Related Articles

HTML | DOM Meter optimum Property
  • Difficulty Level : Basic
  • Last Updated : 29 Oct, 2020

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.
Example-1: This Example returns a optimum Property
 

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output: 
Before Clicking On Button: 
 

After Clicking On Button: 
 



Example-2 : This Example sets the optimum Property
 

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output: 
Before Clicking On Button: 
 

After Clicking On Button: 
 

Supported Browsers: 
 

  • Google Chrome
  • Mozilla Firefox
  • Safari
  • Opera

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :