HTML | DOM Style isolation Property

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

Example-2: Showing Isolate Property.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

Example-3: Showing Initial Property.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

Example-4: Showing Inherit Property.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

Note: Internet Explorer does not support this property.

Browser Support: The browsers supported by DOM isolation property are listed below:

  • Google Chrome
  • Firefox
  • Opera
  • Safari


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.