Skip to content
Related Articles

Related Articles

HTML | DOM HR width Property

Improve Article
Save Article
Like Article
  • Last Updated : 26 May, 2022

The DOM HR width Property is used to set or return the value of the width attribute of an HR Element.

Note: This property is not supported by HTML5.

Syntax: 

  • It returns an HR width Property.
hrobject.width; 
  • It sets the HR width Property.
hrobject.width="pixels|%"";

Property Values 

  • pixel: It specifies the width of the HR Element in terms of pixels.
  • %: It sets the width of <hr> attribute in terms of percentage (%).
     

Return value: It returns a string value that represents the width of an HR Element. 

Example 1: This example returns the HR width property. 

HTML




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

Output:

  • Before Clicking on the Button:

 

  • After Clicking on the Button:

 

Example 2: This example sets the HR width property. 

HTML




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

Output:

  • Before Clicking on the Button:

 

  • After Clicking on the Button:

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!