Thuộc tính cách ly kiểu HTML DOM dùng để xác định xem phần tử có phải tạo nội dung xếp chồng mới hay không. Thuộc tính này chủ yếu được sử dụng để ngăn phần tử trộn lẫn trong nền bằng cách tạo một phần tử ngăn xếp riêng biệt.
Sau đây là cú pháp cho -
Đặt thuộc tính cô lập -
object.style.isolation = "auto|isolate|initial|inherit"
Các thuộc tính trên được giải thích như sau -
| Giá trị | Mô tả |
|---|---|
| auto | Đây là thuộc tính mặc định để đặt chiều cao. |
| chiều dài | Công cụ này để xác định chiều cao theo đơn vị chiều dài. |
| % | Xác định lại chiều cao liên quan đến phần tử mẹ theo tỷ lệ phần trăm. |
| tên ban đầu | Xác nhận thuộc tính này về giá trị ban đầu. |
| kế thừa | Kế thừa giá trị thuộc tính mẹ |
Hãy để chúng tôi xem xét một ví dụ cho thuộc tính cô lập -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
#demo{
background-color: lightpink;
width: 250px;
height: 250px;
}
#demo2{
width: 100px;
height: 100px;
border: 3px solid red;
padding: 4px;
mix-blend-mode:difference;
}
</style>
<script>
function changeIsolation() {
document.getElementById("demo1").style.isolation="isolate";
document.getElementById("Sample").innerHTML="The inner div has now been isolated";
}
</script>
</head>
<body>
<div id="demo">
<div id="demo1">
<div id="demo2">
INNER DIV
</div>
</div>
</div>
<p>Change the isolation mode for the inner div by clicking the below button</p>
<button onclick="changeIsolation()">Change Isolation</button>
<p id="Sample"></p>
</body>
</html> Đầu ra
Khi nhấp vào nút “ Thay đổi cách ly Nút ”-
