Skip to content
Related Articles

Related Articles

HTML | DOM Style isolation Property
  • Last Updated : 01 Aug, 2019

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

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :