HTML DOM Style isolation প্রপার্টি

HTML DOM Style isolation প্রপার্টি একটি এলিমেন্ট নতুন স্ট্যাকিং কনটেক্সট তৈরি করবে কিনা তা নির্ধারণ করতে ব্যবহৃত হয়। এই প্রপার্টি প্রধানত পাশchnik্যালের সাথে ব্লেন্ডিং রোধ করার জন্য আলাদা স্ট্যাক এলিমেন্ট তৈরি করতে ব্যবহৃত হয়।

সিনট্যাক্স

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 = "ভেতরের ডিভটি এখন আইসোলেট করা হয়েছে";
  }
</script>
</head>
<body>
  <div id="demo">
    <div id="demo1">
      <div id="demo2">
        INNER DIV
      </div>
    </div>
  </div>
  <p>নিচের বাটনে ক্লিক করে ভেতরের ডিভের আইসোলেশন মোড পরিবর্তন করুন</p>
  <button onclick="changeIsolation()">আইসোলেশন পরিবর্তন করুন</button>
  <p id="Sample"></p>
</body>
</html>

আউটপুট

প্রাথমিক অবস্থায় ভেতরের ডিভ পাশchnik্যালের সাথে ব্লেন্ড হবে (mix-blend-mode: difference-এর কারণে)।

"আইসোলেশন পরিবর্তন করুন" বাটনে ক্লিক করার পর ভেতরের ডিভ আলাদা স্ট্যাকিং কনটেক্সট পাবে এবং পাশchnik্যালের সাথে ব্লেন্ড করবে না।