Open In App

HTML | DOM HR size Property

Improve
Improve
Like Article
Like
Save
Share
Report

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

Note : This property is not supported by HTML5

Syntax: 

  • It returns the HR size property. 
hrobject.size
  • It is used to set the HR size property. 
hrobject.size="value"

Property Values:  

  • value: It contains the pixel value which specify the height of the HR element.

Return value: It returns a string value that represents the height of the HR element. 

Example 1: This example returns the HR size property.  

HTML




<!DOCTYPE html>
<html>
<head>
    <title>HTML DOM HR size property</title>
</head>
<body>
    <h1>GeeksForGeeks</h1>
    <h2>DOM HR size Property</h2>
     
<p>
        There is a horizontal rule
        below this paragraph.
    </p>
 
  
    <!-- Assigning id to 'hr' tag. -->
    <hr id="GFG" align="left" size="10px"
                width="240px" 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 the HR size property
            var x = document.getElementById("GFG").size;
            document.getElementById("sudo").innerHTML = x;
        }
    </script>
</body>
</html>


  • Before Clicking on Button: 

  • After Clicking on Button: 
     

Example 2: This example sets the HR size property. 

HTML




<!DOCTYPE html>
<html>
<head>
    <title>HTML DOM HR size property</title>
</head>
<body>
    <H1>GeeksForGeeks</H1>
    <h2>DOM HR size Property</h2>
     
<p>
        There is a horizontal rule
        below this paragraph.
    </p>
 
     
    <!-- Assigning id to 'hr' tag. -->
    <hr id="GFG" align="left" size="10px"
                width="240px" 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 size property
            var x =
                document.getElementById("GFG").size = "5";
             
            document.getElementById("sudo").innerHTML
                    = "The value of the size Attribute "
                    + "was changed to " + x;
        }
    </script>
</body>
</html>


  • Before Clicking on Button:

  • After Clicking on Button: 

Supported Browsers: The browser supported by DOM HR size property are listed below: 

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Safari
  • Opera


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