Open In App

HTML | DOM HR color Property

Improve
Improve
Like Article
Like
Save
Share
Report

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:

 



Last Updated : 24 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads