Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM HR size Property

  • Last Updated : 11 Sep, 2019

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

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 which represents the height of the HR element.

Example 1: This example returns the HR size property.






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




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

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 :