HTML | DOM HR color Property
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 >
< 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 >
< 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:
Last Updated :
24 Aug, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...