Skip to content
Related Articles

Related Articles

HTML | DOM HR width Property
  • Last Updated : 05 Sep, 2019

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

Syntax:

  • It returns a HR width Property.
    hrobject.width; 
  • It sets the HR width Property.
    hrobject.width="value";

Property Values

  • pixel: It specifies the width of the HR Element in terms of pixels.

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

Example 1: This example returns the HR width property.






<!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:

Examole 2: This example sets the HR width property.




<!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 :