HTML| DOM Variable Object
The DOM Variable Object is used to represent HTML <var> element. The var element is accessed by getElementById().
Syntax:
var element = document.getElementById("ID");
Where “id” is the ID assigned to the “var” tag.
Example-1:
HTML
<!DOCTYPE html><html><head> <title>HTML| DOM Variable Object</title></head><style> body { text-align: center; } .sudo { font-size: 40px; font-weight: bold; color: green; } .geeks { font-size: 25px; font-weight: bold; }</style><body> <div class="sudo">GeeksForGeeks</div> <div class="geeks">DOM var Object</div> <var id="GFG">GeeksforGeeks Variable</var> <br> <br> <button onclick="myGeeks()">Submit</button> <script> function myGeeks() { var g = document.getElementById("GFG"); g.style.color = "red"; g.style.fontSize = "25px"; } </script></body></html> |
Output:
- Before Clicking On Button:
- After Clicking On button:
Example-2: Variable Object can be created by using the document.createElement Method.
HTML
<!DOCTYPE html><html><head> <title>HTML| DOM Variable Object</title></head><style> body { text-align: center; } .sudo { font-size: 40px; font-weight: bold; color: green; } .geeks { font-size: 25px; font-weight: bold; }</style><body> <div class="sudo">GeeksForGeeks</div> <br> <div class="geeks">DOM var Object</div> <br> <br> <button onclick="myGeeks()">Submit</button> <script> function myGeeks() { var g = document.createElement("VAR"); var text = document.createTextNode("GeeksForGeeks Variable"); g.appendChild(text); document.body.appendChild(g); } </script></body></html> |
Output:
- Before Clicking On Button:
- After Clicking On Button:
Supported Browsers: The browser supported by DOM var Object are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Please Login to comment...