Thuộc tính HTML DOM boxSizing được sử dụng để chỉ định cách tính tổng chiều rộng và chiều cao của một phần tử. Nó có thể có "hộp viền" hoặc "hộp nội dung" làm giá trị.
Sau đây là cú pháp cho -
Đặt thuộc tính boxSizing -
object.style.boxSizing = "content-box|border-box|initial|inherit"
Các giá trị thuộc tính được giải thích như sau -
| Giá trị | Mô tả |
|---|---|
| content-box | Đây là giá trị mặc định và mọi khoảng đệm hoặc chiều rộng đường viền sẽ được thêm vào chiều rộng cuối cùng của hộp nội dung. |
| khung viền | Trong hộp viền, chiều rộng được chỉ định vẫn giữ nguyên và hộp nội dung sẽ thu nhỏ nếu có bất kỳ phần đệm hoặc đường viền nào được áp dụng cho nó. |
| tên đầu tiên | Để đặt thuộc tính này thành giá trị ban đầu. |
| kế thừa | Để kế thừa giá trị thuộc tính mẹ |
Chúng ta hãy xem một ví dụ cho thuộc tính boxSizing -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
height:100px;
width: 350px;
border: 30px solid lightpink;
box-sizing: border-box;
}
</style>
<script>
function changeBoxSizing(){
document.getElementById("DIV1").style.boxSizing="content-box";
document.getElementById("Sample").innerHTML="The box sizing is now changed to content-box ";
}
</script>
</head>
<body>
<div id="DIV1">
THIS IS SAMPLE TEXT INSIDE DIV.HELLO WORLD DIV.
</div>
<p>Change the above div box-sizing property by clicking the below button</p>
<button onclick="changeBoxSizing()">Change Box Sizing</button>
<p id="Sample"></p>
</body>
</html> Đầu ra
Khi nhấp vào “ Thay đổi kích thước hộp” nút -
