HTML DOM Style isolation 属性

htmlweb developmentfront end technology更新于 2024/3/15 2:20:17

HTML DOM Style isolation 属性用于定义元素是否必须创建新的堆叠内容。此属性主要用于通过创建单独的堆叠元素来防止元素与背景混合。

以下是语法 −

设置隔离属性 −

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

以上属性的解释如下 −

值	描述
auto	这是设置高度的默认属性。
length	这用于以长度单位定义高度。
%	用于以百分比定义相对于父元素的高度。
initial	将此属性设置为初始值。
inherit	继承父级属性值

让我们看一个 Style isolation 属性的示例 −

示例

<!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>