Open In App
Related Articles

HTML DOM HR width Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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 = "pixel | %";

Property Values: 

Property Value

Description

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 style="text-align: center;">
    <h1>GeeksforGeeks</h1>
 
    <h2>HTML DOM HR width Property</h2>
 
    <p>
        Horizontal rule below this paragraph
    </p>
 
    <!-- Assigning id to 'hr' tag. -->
    <hr id="GFG" width="140px">
 
    <button onclick="myGeeks()">
        Click Here!
    </button>
 
    <p id="result"></p>
     
    <script>
        function myGeeks() {
 
            // Accessing 'hr' tag.
            let x = document.getElementById("GFG").width;
            document.getElementById("result").innerHTML = x;
        }
    </script>
</body>
 
</html>

                    

Output:

hr-width

Example 2: This example sets the HR width property. 

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>HTML DOM hr width property</title>
</head>
 
<body style="text-align: center;">
    <h1>GeeksforGeeks</h1>
 
    <h2>HTML DOM HR width Property</h2>
 
    <p>
        Horizontal rule below this paragraph
    </p>
 
    <!-- Assigning id to 'hr' tag. -->
    <hr id="GFG" width="140px">
 
    <button onclick="myGeeks()">
        Click Here!
    </button>
 
    <p id="result"></p>
     
    <script>
        function myGeeks() {
            let x = document.getElementById("GFG").width = "280px";
            document.getElementById("result").innerHTML =
                "Value of width Attribute changed to " + x;
        }
    </script>
</body>
 
</html>

                    

Output:

hr-width-2

Supported Browsers:

  • Chrome 1
  • Edge 12
  • Firefox 1
  • Opera 12.1
  • Safari 4


Last Updated : 29 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads