HTML DOM HR width Property
The DOM HR width Property is used to set or return the value of the width attribute of an HR Element.
Note: This property is not supported by HTML5.
Syntax:Â
- It returns an HR width Property.
hrObject.width;
- It sets the HR width Property.
hrObject.width = "pixel | %";
Property Values:Â
pixel
|
It specifies the width of the HR Element in terms of pixels.
|
%
|
It sets the width of <hr> attribute in terms of percentage (%).
|
Return value: It returns a string value that represents the width of an HR Element.Â
Example 1: This example returns the HR width property.Â
HTML
<!DOCTYPE html>
< html >
< head >
< title >HTML DOM hr width property</ title >
</ head >
< body style = "text-align: center;" >
< h1 >GeeksforGeeks</ h1 >
< h2 >HTML DOM HR width Property</ h2 >
< p >
Horizontal rule below this paragraph
</ p >
< hr id = "GFG" width = "140px" >
< button onclick = "myGeeks()" >
Click Here!
</ button >
< p id = "result" ></ p >
< script >
function myGeeks() {
// Accessing 'hr' tag.
let x = document.getElementById("GFG").width;
document.getElementById("result").innerHTML = x;
}
</ script >
</ body >
</ html >
|
Output:
Example 2: This example sets the HR width property.Â
HTML
<!DOCTYPE html>
< html >
< head >
< title >HTML DOM hr width property</ title >
</ head >
< body style = "text-align: center;" >
< h1 >GeeksforGeeks</ h1 >
< h2 >HTML DOM HR width Property</ h2 >
< p >
Horizontal rule below this paragraph
</ p >
< hr id = "GFG" width = "140px" >
< button onclick = "myGeeks()" >
Click Here!
</ button >
< p id = "result" ></ p >
< script >
function myGeeks() {
let x = document.getElementById("GFG").width = "280px";
document.getElementById("result").innerHTML =
"Value of width Attribute changed to " + x;
}
</ script >
</ body >
</ html >
|
Output:
Supported Browsers:
- Chrome 1
- Edge 12
- Firefox 1
- Opera 12.1
- Safari 4
Last Updated :
29 Jan, 2024
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...