คุณสมบัติ HTML DOM Style isolation

คุณสมบัติ HTML DOM Style isolation ใช้สำหรับกำหนดว่าองค์ประกอบต้องสร้าง stacking context ใหม่หรือไม่ คุณสมบัตินี้ใช้หลักเพื่อป้องกันไม่ให้องค์ประกอบผสมผสานกับพื้นหลังโดยการสร้าง stack element แยกต่างหาก

ไวยากรณ์ (Syntax)

การตั้งค่าคุณสมบัติ isolation:

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

ค่าของคุณสมบัติ (Property Values)

ตัวอย่างการใช้งาน

<!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 = "Inner div ถูกแยก isolation แล้ว"; 
    } 
</script> </head> <body> 
    <div id="demo"> 
        <div id="demo1"> 
            <div id="demo2"> 
                INNER DIV 
            </div> 
        </div> 
    </div> 
    <p>คลิกปุ่มด้านล่างเพื่อเปลี่ยนโหมด isolation ของ inner div</p> 
    <button onclick="changeIsolation()">เปลี่ยน Isolation</button> 
    <p id="Sample"></p> 
</body> </html>

ผลลัพธ์

เมื่อคลิกปุ่ม "เปลี่ยน Isolation":