Thuộc tính thay đổi kích thước kiểu DOM HTML trả về và sửa đổi xem phần tử có thể thay đổi kích thước bởi người dùng hay không trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
-
Trả lại thay đổi kích thước
object.style.resize
-
Đang sửa đổi thay đổi kích thước
object.style.resize = “value”
Giá trị
Ở đây, giá trị có thể là -
| Giá trị | Giải thích |
|---|---|
| kế thừa | Nó kế thừa giá trị thuộc tính này từ phần tử mẹ của nó. |
| tên đầu tiên | Nó đặt giá trị thuộc tính này thành giá trị mặc định. |
| không | Nó đặt một phần tử là không thể thay đổi kích thước. |
| ngang | Nó đặt chiều rộng của phần tử là có thể thay đổi kích thước. |
| dọc | Nó đặt chiều cao của phần tử là có thể thay đổi kích thước. |
| cả | Nó đặt chiều rộng và chiều cao của phần tử là có thể thay đổi kích thước. |
Ví dụ
Hãy để chúng tôi xem một ví dụ về thuộc tính thay đổi kích thước kiểu DOM HTML -
<!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> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Nhấp vào “ Đặt thay đổi kích thước ”Để người dùng có thể thay đổi kích thước phần tử div.
