resize Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:resize

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. resize

Description

The resize property sets whether or not an element is user resizable.

Property Values

Value Description
none Default value. The user cannot resize the element
both can adjust both the height and the width of the element
horizontal can adjust the width of the element
vertical can adjust the height of the element
initialSets this property to its default value.
inheritInherits this property from its parent element.

Technical Details

Item Value
Default Value: none
Return Value: A String, representing the resize property of an element
CSS VersionCSS3

Make a <div> element resizable:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {/*from ww w. j a  v a 2  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">
  <p>resize this DIV element.</p>
</div>

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

</body>
</html>

Related Tutorials