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: