HTML | DOM HR Object
The DOM HR Object is used to represent the HTML <hr> element. The hr element is accessed by getElementById().
Properties:
- Align: It is used to set or return the alignment of a horizontal element.
- color: It is used to set or return the color of the horizontal element.
- noshade: It is used to set or return the noshade property in a horizontal element.
- size: It is used to set or return the height of a horizontal line.
- width: It is used to set or return the width of a horizontal line.
Syntax:
document.getElementById("ID");Where “ID” represent the element id.
Example-1:
html
<!DOCTYPE html><html><head> <title>HTML | DOM HR Object</title></head><body> <H1>GeeksForGeeks</H1> <h2>DOM HR Object</h2> <p>There is a horizontal rule below this paragraph.</p> <!-- Assigning id to 'hr' tag. --> <hr id="GFG"> <p>This is a horizontal rule above this paragraph.</p> <button onclick="myGeeks()">Try it</button> <script> function myGeeks() { // Accessing 'hr' tag. var x = document.getElementById("GFG"); x.style.display = "none"; } </script></body></html> |
Output: Before Clicking On Button:
After Clicking on Button:
Example-2: HR Object can be created by using the document.createElement Method.
html
<!DOCTYPE html><html><head> <title>HTML | DOM HR Object</title></head><body> <h1 style="color:green;">GeeksForGeeks</h1> <h2>DOM HR Object</h2> <button onclick="myGeeks()">Submit</button> <script> function myGeeks() { var g = document.createElement("HR"); document.body.appendChild(g); } </script></body></html> |
Output: Before Clicking On Button:
After Clicking On Button:
Supported Browsers: The browser supported by DOM HR Object are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Please Login to comment...