HTML DOM Style isolation प्रॉपर्टी

परिचय

HTML DOM Style isolation प्रॉपर्टी यह परिभाषित करने के लिए उपयोग की जाती है कि एलिमेंट को एक नया स्टैकिंग कॉन्टेक्स्ट बनाना चाहिए या नहीं। यह प्रॉपर्टी मुख्य रूप से एलिमेंट को बैकग्राउंड में ब्लेंड होने से रोकने के लिए एक अलग स्टैक एलिमेंट बनाकर उपयोग की जाती है।

सिंटैक्स

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

मान और विवरण

उदाहरण

<!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 अब आइसोलेट हो गया है";
  }
</script>
</head>
<body>
  <div id="demo">
    <div id="demo1">
      <div id="demo2">
        INNER DIV
      </div>
    </div>
  </div>
  <p>नीचे दिए गए बटन पर क्लिक करके आंतरिक div के लिए आइसोलेशन मोड बदलें</p>
  <button onclick="changeIsolation()">आइसोलेशन बदलें</button>
  <p id="Sample"></p>
</body>
</html>

आउटपुट

प्रारंभिक स्थिति (आइसोलेशन लागू नहीं):

"आइसोलेशन बदलें" बटन पर क्लिक करने के बाद (isolate लागू):