HTML - DOM Style Object resize Property

Quiz

HTML DOM Style Object resize property specifies whether a user can resize or change the height and width of an element or not.

Syntax

Set the resize property:

object.style.resize= "none | both | horizontal | vertical | initial | inherit";

Get the resize property:

object.style.resize;

Property Values

Value	Description
none	It is the default value where user can not resize the element.
both	It specifies user can change both height and the width of the element.
horizontal	It specifies user can change width of the element.
vertical	It specifies user can change height of the element.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents the resize property of an element.

Examples of HTML DOM Style Object 'resize' Property

Here in this example we have used to the resize property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object resize Property
    </title>
    <style>
        #resize {
            height: 150px;
            width: 150px;
            border: 2px solid #04af2f;
            background-color: rgb(202, 249, 249);
            overflow: auto;
            }
    </style>
</head>
<body>
    <p>
        Click to resize.
    </p>
    <button onclick="fun()">Both</button>    
    <button onclick="funTwo()">Horizontal</button>
    <button onclick="funThree()">Vertical</button>
    <button onclick="funFour()">None</button>
    <br><br><br>
    <div id="resize">
        <p>Hello Everyone</p>
        <p>Welcome to Tutorials Point.</p>
    </div>
    <script>
        function fun() {
            document.getElementById("resize")
                .style.resize = "both";
        }
        function funTwo() {
            document.getElementById("resize")
                .style.resize = "horizontal";
        }
        function funThree() {
            document.getElementById("resize")
                .style.resize = "vertical";
        }
        function funFour() {
            document.getElementById("resize")
                .style.resize = "none";
        }         
    </script>
</body>
</html>

Supported Browsers

Property
resize	Yes 1	Yes 79	Yes 4	Yes 3	Yes 12.1

html_dom.htm

Print Page