HTML | DOM meter Object
The DOM Meter Object is used to represent the HTML <meter> element. The meter element is accessed by getElementById().
Properties:
- form: It belongs to one or more forms that it belongs too.
- max: It is used to specify the maximum value of a range.
- min: It is used to specify the minimum value of a range.
- high: It is used to specify the range considered to be a high value.
- low: It is used to specify the range value that is considered to be low.
- Optimum: It is used to specify the optimum value for the range.
- value: It is used to specify the required or actual value of the range.
- labels: It is used to return a list of <label> element that has been labeled for the gauge.
Syntax:
document.getElementById("ID");
Where “id” is the ID assigned to the “meter” tag.
Example-1:
html
<!DOCTYPE html><html><head> <title>DOM Meter Object</title></head><body> <h1>GeeksforGeeks</h1> <h2>DOM Meter Object:</h2> Sachin's score: <!-- assigning id to meter with properties. --> <meter id="GFG" value="5" min="0" max="10"> 5 out of 10 </meter> <br>Laxma score: <!-- meter tag using value property. --> <meter value="0.5">50% from 100% </meter> <br> <button onclick="Geeks()"> Submit </button> <p id="sudo"></p> <script> function Geeks() { // Accessing 'meter' tag. var g = document.getElementById("GFG").value; document.getElementById("sudo").innerHTML = g; } </script> </body></html> |
Output:
Before Clicking On Button :
After Clicking On Button:
Example-2: Meter Object can be created by using the document.createElement method.
html
<!DOCTYPE html><html><head> <title>DOM Meter Object</title> <style> body { font-size: 20px; } </style></head><body style="text-align:center;"> <form> <h1 style="color:green">GeeksforGeeks</h1> <h2>DOM Meter Object</h2> <p id="GFG">Sachins score:</p> </form> <button onclick="myGeeks()">Submit</button> <script> function myGeeks() { // Creating meter object using // document.createElement. var g = document.createElement("METER"); g.setAttribute("min", "0"); g.setAttribute("max", "10"); g.setAttribute("value", "5"); document.body.appendChild(g); } </script></body></html> |
Output:
Before Clicking On Button:
After Clicking On Button:
Supported Browsers: The browser supported by DOM Meter Object are listed below:
- Google Chrome
- Firefox
- Opera
- Safari
Please Login to comment...