In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > resize

resize style property

Browser support:

Specifies or retrieves whether an element is resizable and if so, along which axis.

Syntax:

object.resize;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: resize

Possible values:

The type of this property is string.

One of the following values:

both

Allow to adjust the height and the width of the element.

horizontal

Allow to adjust only the width of the element.

inherit

Takes the value of this property from the computed style of the parent element.

none

Resizing is not allowed for the user.

vertical

Allow to adjust only the height of the element.

Default: none.

Example HTML code 1:

This example illustrates the use of the resize property:

<head>
    <style>
        .example {
            background: red;
            width: 200px;
            height: 100px;
            resize: both;
            overflow: scroll;
        }
    </style>
</head>
<body>
    <div class="example">Resize this division!</div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the resize property in JavaScript:

<head>
    <script type="text/javascript">
        function ChangeResize (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the text of the selected option
            var richValue = selectTag.options[whichSelected].text;

            var div = document.getElementById ("myDiv");

            if ('resize' in div.style) {
                div.style.resize = richValue;            
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <div id="myDiv" style="background: red; width: 200px; height100px; resize: both; overflow: scroll;">Resize this division</div>

    <select onchange="ChangeResize (this);" size="4">
        <option selected="selected" />both
        <option />none
        <option />horizontal
        <option />vertical
    </select>
</body>