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:
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"> w3wiki </ 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"> w3wiki 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:
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"> w3wiki </ 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"> w3wiki 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:
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"> w3wiki </ 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"> w3wiki 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:
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"> w3wiki </ 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"> w3wiki 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:
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"> w3wiki </ 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"> w3wiki 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:
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"> w3wiki </ 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"> w3wiki 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 1
- Edge 79
- Firefox 4
- Opera 12.1
- Apple Safari 3
Contact Us