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:
<!DOCTYPE html> < html > < head > < title >var tag</ 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.
<!DOCTYPE html> < html > < head > < title >var tag</ 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