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:
- 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">
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:
- 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">
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:
- 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">
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:
- 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">
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:
- 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">
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:
- 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