Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Style resize Property
The HTML DOM style resize property returns and modify whether the element is resizable by the user or not in an HTML document.
Syntax
Following is the syntax −
Returning resize
object.style.resize
Modifying resize
object.style.resize = “value”
Values
Here, value can be −
| Value | Explanation |
|---|---|
| inherit | It inherits this property value from its parent element. |
| initial | It set this property value to its default value. |
| none | It sets an element as unresizable. |
| horizontal | It sets the width of the element as resizable. |
| vertical | It sets the height of the element as resizable. |
| both | It sets the width and height of the element as resizable. |
Example
Let us see an example of HTML DOM style resize property −
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
}
.resize-div {
border: 2px solid #fff;
margin: 2rem auto;
width: 300px;
overflow: auto;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>DOM Style resize Property Example</h1>
<div class="resize-div">
<p>I'm a paragraph element with some dummy text.</p>
</div>
<button onclick="add()" class="btn">Set resize</button>
<script>
function add() {
document.querySelector('div').style.resize = "both";
}
</script>
</body>
</html>Output
This will produce the following output −
Click on “Set resize” button to make the div element resizable by the user.
Updated on: 01-Jul-2020
30 Views
Advertisements