HTML | DOM Style resize Property

The Style resize property in HTML DOM is used to specify whether an element is resizable in height and width by the user.

Syntax:

It returns the resize property:
```
object.style.resize
```

It is used to set the resize property:

object.style.resize = "both|horizontal|vertical|none|initial|
inherit"

Property Values:

both: This value enables the user to change both height and width of the element.

Example-1:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
      DOM Style resize Property 
    </title> 
    <style> 
        .content { 
            background-color: lightgreen; 
            border: 1px solid; 
            height: 200px; 
            width: 300px; 
            overflow: auto; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green"> 
      GeeksforGeeks 
    </h1> 
    <b> 
      DOM Style resize Property 
    </b> 
    <p> 
        The resize property is used to  
      specify whether an element is  
      resizable by the user. 
    </p> 
    <p class="content"> 
        GeeksforGeeks is a computer  
      science portal with a huge variety 
      of well written and explained  
      computer science and programming  
      articles, quizzes and interview 
      questions. The portal also has  
      dedicated GATE preparation and  
      competitive programming sections. 
    </p> 
    <button onclick="setResize()"> 
      Change resize 
    </button> 
  
    <!-- Script to set resize to both -->
    <script> 
        function setResize() { 
            elem = document.querySelector('.content'); 
            elem.style.resize = 'both'; 
        } 
    </script> 
</body> 
  
</html> 

Output:

Before clicking the button:
After clicking the button:

horizontal: This value enables the user to change only the width of the element.

Example-2:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
      DOM Style resize Property 
    </title> 
    <style> 
        .content { 
            background-color: lightgreen; 
            border: 1px solid; 
            height: 200px; 
            width: 300px; 
            overflow: auto; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green"> 
      GeeksforGeeks 
    </h1> 
    <b> 
      DOM Style resize Property 
    </b> 
    <p> 
        The resize property is used to  
      specify whether an element is 
      resizable by the user. 
    </p> 
    <p class="content"> 
        GeeksforGeeks is a computer science 
      portal with a huge variety of well 
      written and explained computer science 
      and programming articles, quizzes and 
      interview questions. The portal also 
      has dedicated GATE preparation and  
      competitive programming sections. 
    </p> 
    <button onclick="setResize()"> 
      Change resize 
    </button> 
  
    <!-- Script to set resize to horizontal -->
    <script> 
        function setResize() { 
            elem = document.querySelector('.content'); 
            elem.style.resize = 'horizontal'; 
        } 
    </script> 
</body> 
  
</html> 

Output:

Before clicking the button:
After clicking the button:

vertical: This value enables the user to change only the height of the element.

Example-3:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
      DOM Style resize Property 
    </title> 
    <style> 
        .content { 
            background-color: lightgreen; 
            border: 1px solid; 
            height: 200px; 
            width: 300px; 
            overflow: auto; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green"> 
      GeeksforGeeks 
  </h1> 
    <b> 
      DOM Style resize Property 
  </b> 
    <p> 
        The resize property is used to  
      specify whether an element is  
      resizable by the user. 
    </p> 
    <p class="content"> 
        GeeksforGeeks is a computer science 
      portal with a huge variety of well  
      written and explained computer 
      science and programming articles,  
      quizzes and interview questions.  
      The portal also has dedicated GATE  
      preparation and competitive programming  
      sections. 
    </p> 
    <button onclick="setResize()"> 
      Change resize 
  </button> 
  
    <!-- Script to set resize to vertical -->
    <script> 
        function setResize() { 
            elem = document.querySelector('.content'); 
            elem.style.resize = 'vertical'; 
        } 
    </script> 
</body> 
  
</html> 

Output:

Before clicking the button:
After clicking the button:

none: This value disables the user from changing the height and width of the element.

Example-4:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
      DOM Style resize Property 
  </title> 
    <style> 
        .content { 
            background-color: lightgreen; 
            border: 1px solid; 
            height: 200px; 
            width: 300px; 
            overflow: auto; 
            resize: vertical; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green"> 
      GeeksforGeeks 
  </h1> 
    <b> 
      DOM Style resize Property 
  </b> 
    <p> 
        The resize property is used to 
      specify whether an element is 
      resizable by the user. 
    </p> 
    <p class="content"> 
        GeeksforGeeks is a computer science 
      portal with a huge variety of well written 
      and explained computer science and  
      programming articles, quizzes and  
      interview questions. The portal also has  
      dedicated GATE preparation and competitive  
      programming sections. 
    </p> 
    <button onclick="setResize()"> 
      Change resize 
  </button> 
  
    <!-- Script to set resize to none -->
    <script> 
        function setResize() { 
            elem = document.querySelector('.content'); 
            elem.style.resize = 'none'; 
        } 
    </script> 
</body> 
  
</html> 

Output:

Before clicking the button:
After clicking the button:

initial: This is used to set this property to its default value.

Example-5:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
      DOM Style resize Property 
  </title> 
    <style> 
        .content { 
            background-color: lightgreen; 
            border: 1px solid; 
            height: 200px; 
            width: 300px; 
            overflow: auto; 
            resize: horizontal; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green"> 
      GeeksforGeeks 
  </h1> 
    <b> 
      DOM Style resize Property 
  </b> 
    <p> 
        The resize property is used to specify 
      whether an element is resizable by the user. 
    </p> 
    <p class="content"> 
        GeeksforGeeks is a computer science  
      portal with a huge variety of well written 
      and explained computer science and  
      programming articles, quizzes and  
      interview questions. The portal also has 
      dedicated GATE preparation and competitive 
      programming sections. 
    </p> 
    <button onclick="setResize()"> 
      Change resize 
  </button> 
  
    <!-- Script to set resize to initial -->
    <script> 
        function setResize() { 
            elem = document.querySelector('.content'); 
            elem.style.resize = 'initial'; 
        } 
    </script> 
</body> 
  
</html> 

Output:

Before clicking the button:
After clicking the button:

inherit: This inherits the property from its parent.

Example-6:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
      DOM Style resize Property 
  </title> 
    <style> 
        #parent { 
            resize: both; 
        } 
          
        .content { 
            background-color: lightgreen; 
            border: 1px solid; 
            height: 200px; 
            width: 300px; 
            overflow: auto; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green"> 
      GeeksforGeeks 
  </h1> 
    <b> 
      DOM Style resize Property 
  </b> 
    <p> 
        The resize property is used to 
      specify whether an element is 
      resizable by the user. 
    </p> 
    <div id="parent"> 
        <p class="content"> 
            GeeksforGeeks is a computer science 
          portal with a huge variety of well 
          written and explained computer science 
          and programming articles, quizzes and 
          interview questions. The portal also 
          has dedicated GATE preparation and  
          competitive programming sections. 
        </p> 
    </div> 
    <button onclick="setResize()"> 
      Change resize 
  </button> 
  
    <!-- Script to set resize to inherit -->
    <script> 
        function setResize() { 
            elem = document.querySelector('.content'); 
            elem.style.resize = 'inherit'; 
        } 
    </script> 
</body> 
  
</html> 

Output:

Before clicking the button:
After clicking the button:

Supported Browsers: The browser supported by DOM Style resize property are listed below:

Google Chrome
Firefox
Opera
Apple Safari

My Personal Notes

Recommended Posts: