Related Articles

Related Articles

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:

  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

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :