The DOM Style isolation Property defines whether an element must necessarily create a new stacking context.
Syntax:
object.style.isolation
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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
08 Aug, 2022
Like Article
Save Article