HTML | DOM HR size Property

Last Updated : 24 Aug, 2022

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>