Skip to content
Related Articles

Related Articles

HTML | DOM Style isolation Property

View Discussion
Improve Article
Save Article
  • 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>

Output:

  • Before clicking on the button: 

  • After clicking on the button: 

Note: Internet Explorer does not support this property. 

Supported Browsers: The browsers supported by DOM isolation property are listed below:

  • Google Chrome 41
  • Edge 79
  • Firefox 36
  • Opera 30
  • Safari 8

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!