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:
- both: This value enables the user to change both height and width of the element.
Example-1:
<!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_rightfilter_noneOutput:
- Before clicking the button:
- After clicking the button:
- Before clicking the button:
- horizontal: This value enables the user to change only the width of the element.
Example-2:
<!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_rightfilter_noneOutput:
- Before clicking the button:
- After clicking the button:
- Before clicking the button:
- vertical: This value enables the user to change only the height of the element.
Example-3:
<!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_rightfilter_noneOutput:
- Before clicking the button:
- After clicking the button:
- Before clicking the button:
- none: This value disables the user from changing the height and width of the element.
Example-4:
<!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_rightfilter_noneOutput:
- Before clicking the button:
- After clicking the button:
- Before clicking the button:
- initial: This is used to set this property to its default value.
Example-5:
<!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_rightfilter_noneOutput:
- Before clicking the button:
- After clicking the button:
- Before clicking the button:
- inherit: This inherits the property from its parent.
Example-6:
<!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_rightfilter_noneOutput:
- Before clicking the button:
- After clicking the button:
- Before clicking the button:
Supported Browsers: The browser supported by DOM Style resize property are listed below:
- Google Chrome
- Firefox
- Opera
- Apple Safari