HTML | DOM Style isolation Property

Last Updated : 08 Aug, 2022

The DOM Style isolation Property defines whether an element must necessarily create a new stacking context.

Syntax:

Return isolation syntax:

object.style.isolation

Set isolation syntax:

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

Properties:

auto: It is the default property value. Using this property, if one of the properties applied to the element requires then only a new stacking context is created.
isolate: It states that a new stacking context must be created, without any failure.
initial: It sets the isolation property to it’s default value.
inherit: It inherits the isolation property values of the parent element.

Return Value: It returns stacking context of an element.

Example-1: Showing Auto Property.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
       HTML | DOM Style isolation Property
    </title>
    <center>
        <h1>Geeks 
          <button onclick="isolation()">
            Press
          </button>
        </h1>
 
        <h2>
          DOM Isolation Property
        </h2>
    </center>
    <h4>
      Click on the 'Press' button to
      set the property to 'auto'
    </h4>
 
    <style>
        .p {
            background-color: green;
            border: 1px solid black;
        }
         
        #p1 {
            width: 300px;
            height: 100px;
        }
         
        .P {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            mix-blend-mode: screen;
        }
         
        #d {
            isolation: auto;
        }
    </style>
 
</head>
 
<body>
 
    <div id="gfg" class="p">
        <div id="d">
            <div class="p P">
                geeksforgeeks
            </div>
 
        </div>
    </div>
 
    <script>
        function isolation() {
            document.getElementById(
                "d").style.isolation = "auto";
        }
    </script>
</body>
 
</html>

Output:

Before clicking on the button:

After clicking on the button:

Example-2: Showing Isolate Property.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML | DOM Style isolation Property
    </title>
    <center>
        <h1>
          Geeks 
          <button onclick="isolation()">
            Press
          </button>
         </h1>
 
        <h2>DOM Isolation Property</h2>
    </center>
    <h4>
      Click on the 'Press' button to set the 
      property to 'isolate'
    </h4>
 
    <style>
        .p {
            background-color: green;
            border: 1px solid black;
        }
         
        #p1 {
            width: 300px;
            height: 100px;
        }
         
        .P {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            mix-blend-mode: screen;
        }
         
        #d {
            isolation: auto;
        }
    </style>
</head>
 
<body>
 
    <div id="gfg" class="p">
        <div id="d">
            <div class="p P">
                geeksforgeeks
            </div>
        </div>
    </div>
 
    <script>
        function isolation() {
            document.getElementById(
                "d").style.isolation = "isolate";
        }
    </script>
</body>
 
</html>

Output:

Before clicking on the button:

After clicking on the button:

Example-3: Showing Initial Property.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML | DOM Style isolation Property
    </title>
    <center>
        <h1>
         Geeks 
          <button onclick="isolation()">
            Press
          </button>
        </h1>
        <h2>DOM Isolation Property</h2>
    </center>
    <h4>
      Click on the 'Press' button to set 
      the property to 'initial'
    </h4>
 
    <style>
        .p {
            background-color: green;
            border: 1px solid black;
        }
         
        #p1 {
            width: 300px;
            height: 100px;
        }
         
        .P {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            mix-blend-mode: screen;
        }
         
        #d {
            isolation: auto;
        }
    </style>
</head>
 
<body>
 
    <div id="gfg" class="p">
        <div id="d">
            <div class="p P">
                geeksforgeeks
            </div>
        </div>
    </div>
 
    <script>
        function isolation() {
 
            document.getElementById(
                "d").style.isolation = "initial";
        }
    </script>
</body>
 
</html>

Output:

Before clicking on the button:

After clicking on the button:

Example-4: Showing Inherit Property.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML | DOM Style isolation Property
    </title>
    <center>
        <h1>
          Geeks 
          <button onclick="isolation()">
            Press
          </button>
 
        </h1>
 
        <h2>
          DOM Isolation Property
        </h2>
    </center>
    <h4>
      Click on the 'Press' button to 
      set the property to 'inherit'
    </h4>
 
    <style>
        .p {
            background-color: green;
            border: 1px solid black;
        }
         
        #p1 {
            width: 300px;
            height: 100px;
        }
         
        .P {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            mix-blend-mode: screen;
        }
         
        #d {
            isolation: auto;
        }
    </style>
</head>
 
<body>
 
    <div id="gfg" class="p">
        <div id="d">
            <div class="p P">
                geeksforgeeks
            </div>
        </div>
    </div>
 
    <script>
        function isolation() {
            document.getElementById(
                "d").style.isolation = "inherit";
        }
    </script>
</body>
 
</html>