How to set whether or not an element is resizable by the user with JavaScript?

In this tutorial, we will learn to set whether or not an element is resizable by the user with JavaScript. Use the resize property to set whether the element is resizable by the user or not.

The elements on a webpage are fixed on their position and size. But, sometimes, you need to give access to a user to increase the size or change the position of an element. The resize property of CSS gives us a way to change the size of an element. JavaScript DOM nearly provides all the styling properties provided by the CSS. We can even set the element to resizable using JavaScript DOM.

So, let us look at how to set whether or not an element is resizable by the user using JavaScript.

Using the Style resize property to set an element resizable

Different websites have different services provided to the user. Some web pages’ deal with shapes and lines. The resize property is used to set whether or not an element is resizable by the user. You will have looked at the Textarea that is resizable by default. We can make it non-resizable by setting resize property to none.

All the users can follow the below syntax to use the resize property to set an element resizable

Syntax

var div= document.getElementById(" <id here> ");
div.style.resize = "none || both || horizontal || vertical || initial || inherit"

Parameters

  • none − A default value. The element is non-resizable.
  • vertical − The element is resizable only on the vertical side.
  • horizontal − The element is resizable only on the horizontal side.
  • both − The element is resizable from both vertical and horizontal sides.
  • initial − Set to the default value.
  • inherit − Inherit the properties from its parent.

Example 1

You can try to run the following code to set whether or not an element is resizable by the user with JavaScript −

<!DOCTYPE html>
<html>
<head>
   <style>
      #box {
         width: 350px;
         overflow: auto;
         background-color: orange;
         border: 3px solid red;
      }
   </style>
</head>
<body>
   <p>Click to set the right position. </p>
   <button type = "button" onclick = "display()"> Set Right Position
   </button>
   <div id = "box">
      <p>This is a div. This is a div. This is a div. This is a div.<p>
      <p>This is a div. This is a div. This is a div. This is a div.<p>
      <p>This is a div. This is a div. This is a div. This is a div.<p>
   </div>
   <br>
   <br>
   <script>
      function display() {
         document.getElementById("box").style.resize = "both";
      }
   </script>
</body>
</html>

Example 2

In the example, we have used a resize property to make a div element resizable. We have added an onclick method on a div element. After clicking a div, the div will be set to resizable. You have to drag n drop the corner of the container to change its size, and then clicking it again will make it non-resizable.

<html>
<head>
   <style>
      #container{
         overflow: auto;
         border: 1px dashed blue;
         width: 350px;
         height: 20%;
      }
   </style>
</head>
<body id = "body">
   <h3> Click within the box to set whether or not the element is resizable
   by the user.</h3>
   <div onclick = "func()" id = "container">
      This is a container
   </div>
   <script>
      function func(){
         var div=document.getElementById("container");
         if(div.style.resize=="" || div.style.resize=="none"){
         div.style.resize = "both";
         } else {
            div.style.resize = "none";
         }
      }
   </script>
</body>
</html>

In the above example, users can see that we have used the resize property to set if the element is resizable by the user with JavaScript.

Example 3

In the example below, we added a dropdown menu and values to resize an element. After clicking a button, we execute a function that will set the resize property with a value selected from a dropdown.

<html>
<head>
   <style>
      #div{
         border: 1px solid green;
      }
   </style>
</head>
<body id = "body">
   <h2> Use <i> resize property </i> to set whether or not an element is
   resizable by the user </h2>
   <div id ="div">
      <label> Select Resize value</label>
      <select id = "resize_select">
         <option value = "none"> none
         </option>
         <option value = "both"> both
         </option>
         <option value = "horizontal"> horizontal
         </option>
         <option value = "vertical"> vertical
         </option>
      </select> <br>
      <button id = "btn"> Submit </button>
   </div>
      <script>
         document.getElementById("btn").addEventListener("click", func);
         var div = document.getElementById("div");
         div.style.overflow = "auto";
         div.style.width = "30%";
         div.style.height = "20%";
         div.style.textAlign = "center";
         function func(){
            var selectValue = document.querySelector('#resize_select');
            var selected = selectValue.value;
            div.style.resize = selected;
         }
      </script>
</body>
</html>

In the above example, users can see that we have set the div element to resizable. We have changed the horizontal width of a div element.

In this tutorial, we have learned to set whether or not an element is resizable by the user with JavaScript.

Updated on: 26-Oct-2022

298 Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements