Thuộc tính isolation trong HTML DOM Style

Giới thiệu

Thuộc tính isolation trong HTML DOM Style dùng để xác định xem một phần tử có phải tạo ra một stacking context (ngữ cảnh xếp chồng) mới hay không. Thuộc tính này chủ yếu dùng để ngăn chặn phần tử bị hòa lẫn vào nền bằng cách tạo một stacking element riêng biệt.

Cú pháp

Thiết lập isolation:

object.style.isolation = "auto|isolate|initial|inherit"

Giá trị

Giá trị	Mô tả
auto	Mặc định: trình duyệt quyết định có tạo stacking context mới hay không (thường khi có z-index, opacity, transform...).
isolate	Buộc tạo một stacking context mới cho phần tử.
initial	Đặt về giá trị mặc định.
inherit	Kế thừa từ phần tử cha.

Ví dụ

Ví dụ sử dụng isolation: isolate để ngăn chặn mix-blend-mode của div con ảnh hưởng đến nền bên ngoài.

<!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 = "Div con bây giờ đã được tách biệt (isolated)"; 
  } 
</script> </head> <body> 
  <div id="demo"> 
    <div id="demo1"> 
      <div id="demo2"> 
        INNER DIV 
      </div> 
    </div> 
  </div> 
  <p>Nhấn nút để thay đổi chế độ isolation cho div con</p> 
  <button onclick="changeIsolation()">Thay đổi Isolation</button> 
  <p id="Sample"></p> 
</body> </html>

Kết quả

Thuộc tính isolation trong HTML DOM Style

Sau khi nhấn nút Thay đổi Isolation:

Thuộc tính isolation trong HTML DOM Style