HTML | DOM Style resize Property

Last Updated : 05 Aug, 2022

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:

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

Example 1:

HTML

<!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:

both-before

After clicking the button:

both-after

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

Example 2:

HTML

<!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:

horizontal-before

After clicking the button:

horizontal-after

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

Example 3:

HTML

<!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:

vertical-before

After clicking the button:

vertical-after

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

Example 4:

HTML

<!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:

none-before

After clicking the button:

none-after

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

Example 5:

HTML

<!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:

initial-before

After clicking the button:

initial-after

6. inherit: This inherits the property from its parent.

Example 6:

HTML

<!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>