The DOM HR color property is used to set or return the value of the color attribute of a <hr> element.
Note: This property is not supported by HTML5
Syntax:
- It returns a HR color property.
hrobject.color
- It sets the HR color property.
hrobject.color="value"
Property Values:
- color_name: It holds the text color by using color name. For example: “red”.
- hex_number: It holds the text color by using color hex code. For example: “#0000ff”.
- rgb_number: It holds the text color by using rgb code. For example: “rgb(0, 153, 0)”.
Return Value: It returns a string value which represents the color of the HR Element.
Example 1: This example uses DOM HR color property to return the HR color attribute.
HTML
<!DOCTYPE html> <html>
<head>
<title>HTML DOM hr color property</title>
</head>
<body>
<H1>GeeksForGeeks</H1>
<h2>DOM HR color Property</h2>
<p>
There is a horizontal rule
below this paragraph.
</p>
<!-- Assigning id to 'hr' tag. -->
<hr id="GFG" align="left" width="140px" color="red">
<p>
This is a horizontal rule
above this paragraph.
</p>
<button onclick="myGeeks()">Try it</button>
<h3 id="sudo"></h3>
<script>
function myGeeks() {
// return HR color property
var x = document.getElementById("GFG").color;
document.getElementById("sudo").innerHTML = x;
}
</script>
</body>
</html>
|
Output:
- Before Clicking On Button:
- After Clicking On Button:
Example 2: This example uses DOM HR color property to set the HR color attribute.
HTML
<!DOCTYPE html> <html>
<head>
<title>HTML DOM hr color property</title>
</head>
<body>
<H1>GeeksForGeeks</H1>
<h2>DOM HR color Property</h2>
<p>
There is a horizontal rule
below this paragraph.
</p>
<!-- Assigning id to 'hr' tag. -->
<hr id="GFG" align="left" width="140px" color="red">
<p>
This is a horizontal rule
above this paragraph.
</p>
<button onclick="myGeeks()">Try it</button>
<h3 id="sudo"></h3>
<script>
function myGeeks() {
// set HR color property
var x = document.getElementById("GFG").color
= "blue";
document.getElementById("sudo").innerHTML
= "The color was changed to " + x;
}
</script>
</body>
</html>
|
Output:
- Before Clicking On Button:
- After Clicking On Button: