Javascript DOM CSS Style resize Property

Introduction

Make a <div> element resizable:

document.getElementById("myDIV").style.resize = "both";

Click the button to make the DIV element resizable:

View in separate window

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {//from  w  w w  .  j ava  2 s  .  c  om
  border: 1px solid black;
  background-color: lightblue;
  width: 270px;
  overflow: auto;
}
</style>
</head>
<body>
<button onclick="myFunction()">Test</button>

<div id="myDIV">
  <p>Click the button, then drag the bottom right corner to resize this DIV element.</p>
</div>

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

The resize property specifies whether an element is resizable by the user.

The resize property applies to elements whose overflow value is not "visible".

Property Values

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

The resize property returns a String representing the resize property of an element.

Previous Next