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:
|
Property Value |
Description |
|---|---|
|
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>
<!-- Assigning id to 'hr' tag. -->
<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>
<!-- Assigning id to 'hr' tag. -->
<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