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:



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

    Example-1:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

    • Before clicking the button:

      initial-before

    • After clicking the button:

      initial-after

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

    Example-6:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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
  • Firefox
  • Opera
  • Apple Safari


My Personal Notes arrow_drop_up

Technical Writer Lets have an update

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.