Open In App

HTML | DOM Style resize Property

Improve
Improve
Like Article
Like
Save
Share
Report

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>


Output:

  • Before clicking the button:

 inherit-before

  • After clicking the button:

 inherit-after

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

  • Google Chrome 1
  • Edge 79
  • Firefox 4
  • Opera 12.1
  • Apple Safari 3


Last Updated : 05 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads