HTML DOM Style resize Property

The HTML DOM style resize property returns and modify whether the element is resizable by the user or not in an HTML document.

Syntax

Following is the syntax −

Returning resize

object.style.resize

Modifying resize

object.style.resize = “value”

Values

Here, value can be −

Value	Explanation
inherit	It inherits this property value from its parent element.
initial	It set this property value to its default value.
none	It sets an element as unresizable.
horizontal	It sets the width of the element as resizable.
vertical	It sets the height of the element as resizable.
both	It sets the width and height of the element as resizable.

Example

Let us see an example of HTML DOM style resize property −

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      color: #000;
      background: lightblue;
      height: 100vh;
   }
   .resize-div {
      border: 2px solid #fff;
      margin: 2rem auto;
      width: 300px;
      overflow: auto;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
   }
</style>
</head>
<body>
<h1>DOM Style resize Property Example</h1>
<div class="resize-div">
<p>I'm a paragraph element with some dummy text.</p>
</div>
<button onclick="add()" class="btn">Set resize</button>
<script>
   function add() {
      document.querySelector('div').style.resize = "both";
   }
</script>
</body>
</html>

Output

This will produce the following output −

HTML DOM Style resize Property

Click on “Set resize” button to make the div element resizable by the user.

HTML DOM Style resize Property