Open In App

HTML DOM HR width Property

Last Updated : 29 Jan, 2024
Improve
Improve
Like Article
Like
Save
Share
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


Similar Reads

HTML width/height Attribute vs CSS width/height Property
In HTML 5, few elements follow the width and height attributes and maximum elements do not follow this attribute. Like img, iframe, canvas, and svg kind of elements follow the width and height attributes but div, span, article and section type of elements don't follow them.The width and height attributes are affected in img, svg tags, those are wea
3 min read
HTML DOM Screen width Property
The Screen width property is used for returning the total width of a user's screen. It returns the total width of the screen in pixels. Syntax: screen.widthReturn Value: A Number, representing the total width of the user's screen, in pixels Below program illustrates the Screen width Property : Checking the total width of a user's screen. C/C++ Code
1 min read
HTML | DOM Style width Property
The Style width property in HTML DOM is used to set or return the width of an element which can be block-level elements or elements with fixed position. Syntax: It is used to return the width property:object.style.widthIt is used to set the width property:object.style.width = "auto|length|%|initial|inherit" Property Value Description auto-This valu
2 min read
HTML | DOM Object width Property
The DOM Object width Property in HTML DOM is used to set or return the width of the Object. The width attribute is used to specify the width of an Object. Syntax: It returns the width property. objObject.widthIt is used to set the width property. objObject.width = pixels Property Values: It contains the value i.e pixel which specifies the width of
2 min read
HTML DOM IFrame width Property
The HTML DOM IFrame width Property is used to sets or return the value of the width attribute of a Iframe Element. The width Attribute is used to specify the width of an Iframe Element. Syntax: It returns the width Property.iframeObject.widthIt is used to set the width property.iframeObject.width = pixels Property Values: pixels: It specifies the w
2 min read
HTML DOM Input Image width Property
The Input Image width Property In HTML DOM is used to return the value of the width attribute of the &lt;input type="image"&gt;. Syntax: To return the width Property.imageObject.widthTo set the width Property.imageObject.width = value; Property Value: It contains the numeric value which specifies the width of the image in terms of pixels. Return Va
2 min read
HTML | DOM embed width property
The DOM embed width property in HTML is used to set or return the value of the width attribute. The width attribute defines the width of the embedded content, in pixels. Syntax: Return the width property:embedObject.widthSet the width property:embedObject.width = pixels Property Values: px: Specify the width in pixels of the embedded content. Retur
2 min read
HTML | DOM Table width Property
The Table width property in HTML DOM is used to set or return the value of the width attribute of a table. Note: This property is not supported by HTML5. Syntax: It returns the width property of a table.tableObject.width;It is used to set the width property of a table.tableObject.width ="pixels"; Attribute Values: pixels: It sets the width of a tab
2 min read
HTML DOM Pre width Property
The HTML DOM Pre width Property is used to set or return the value of the width attribute of the &lt;pre&gt; element. Syntax: It returns a pre width Property. preObject.widthIt is used to set the pre width property. preObject.width = "pixels/%"; Property Values: pixels: It sets the width of a predetermined text in terms of pixels.%: It sets the wid
2 min read
HTML DOM Marquee width Property
The HTML DOM Marquee width property is used to set or return the value of the width attribute of the &lt;marquee&gt; element. Syntax: It returns the marquee width property. marqueeObject.width; It sets the marquee width property. marqueeObject.width="px/%" Property values: px: It defines the width value of the marquee.%: It defines the width value
2 min read
Article Tags :