You are here: Reference > JavaScript > client-side > HTML DOM > properties > size (hr)

size property (hr)

Browser support:
Sets or retrieves the height of the horizontal rule.
This property is deprecated. Use style properties (background, color, height ...) to manipulate line styling more efficiently.

Syntax:

object.size;
You can find the related objects in the Supported by objects section below.
This property is read/write.
HTML page for this property: size

Possible values:

String that sets or retrieves the height of the rule, with an integer optionally followed by a 'px' (pixel) unit designator.
Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the size attribute:
line with size="5" :
<hr size="5" style="width:50%; text-align:center;" />
line with size="20" :
<hr size="20" style="width:50%; text-align:center;" />
Did you find this example helpful? yes no

Example HTML code 2:

Recommendation:
line with height 5 :
<hr style="height:5px; width:50%; text-align:center;" />
line with height 20 :
<hr style="height:20px; width:50%; text-align:center;" />
Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the size property:
<head>
    <script type="text/javascript">
        function ChangeRuleHeight () {
            var rule = document.getElementById ("myRule");
            var input = document.getElementById ("myInput");

            rule.size = input.value;
        }
    </script>
</head>
<body>
    <hr id="myRule" size="5" style="width:50%; text-align:center;" />

    <input id="myInput" type="text" value="10" />
    <button onclick="ChangeRuleHeight ();">Change the size of the rule!</button>
</body>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content