Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM HR color Property

  • Last Updated : 11 Sep, 2019

The DOM HR color property is used to set or return the value of the color attribute of a <hr> element.

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.






<!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() { 
              
            // Accessing 'hr' tag
            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.




<!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() { 
              
            // Accessing 'hr' tag
            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:

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :