HTML | DOM Heading Object
The DOM Heading Object is used to represent the HTML <Heading> elements. The Heading elements is accessed by getElementById().
Properties:
- align: This element contains a align attribute which is used to sets or returns the alignment of the heading elements.
Syntax:
document.getElementById("ID");
Where “id” is the ID assigned to the “headings” tag.
Example-1:
html
<!DOCTYPE html><html><body> <center> <!-- assigning id to h1. --> <h1 id="GFG" style="color:green;"> GeeksForGeeks </h1> <h2> DOM Headings Object </h2> <button onclick="myGeeks()"> Submit </button> <script> function myGeeks() { // Accessing heading. var g = document.getElementById("GFG"); g.style.color = "red"; g.style.fontSize = "35px"; } </script> </center></body></html> |
Output:
Before Clicking On Button:
After Clicking On Button:
Example-2:Headings Object can be created by using the document.createElement Method.
html
<!DOCTYPE html><html><body> <h1 id="GFG" style="color:green;"> GeeksForGeeks </h1> <h2> DOM Headings Object </h2> <button onclick="myGeeks()">Submit</button> <script> function myGeeks() { // Creating "H1" heading. var g = document.createElement("H1"); var f = document.createTextNode( "Welcome to GeeksForGeeks"); g.appendChild(f); document.body.appendChild(g); } </script></body></html> |
Output:
Before Clicking On Button:
After Clicking On Button:
Supported Browsers: The browser supported by DOM Headings Object are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Please Login to comment...