HTML | DOM Style resize Property

Last Updated : 02 Aug, 2019

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

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML course.

My Personal Notes

Related Articles

HTML | DOM Style resize Property