Javascript Reference - HTML DOM Style resize Property

The resize property gets and sets whether an element is resizable by the user.

Browser Support


`resize`	Yes	No	Yes	Yes	Yes

Syntax

Return the resize property:

var v = object.style.resize

Set the resize property:

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

Property Values

none: Default value. The user cannot resize the element
both: The user can resize both the height and width
horizontal: The user can adjust the width
vertical: The user can adjust the height

Technical Details

Default Value:	none
Return Value:	A string representing the resize property
CSS Version	CSS3

Example

The following code shows how to make a <div> element resizable


<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {<!--from   www  .  j av a2 s  . c o m-->
    border: 1px solid black;
    background-color: lightblue;
    width: 270px;
    overflow: auto;
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>
<div id="myDIV">resize me after clicking the button</div>

<script>
function myFunction() {
    document.getElementById("myDIV").style.resize = "both";
}
</script>
</body>
</html>

The code above is rendered as follows: