HTML | DOM HR width Property

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

Recommended Posts: