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.
html
<!DOCTYPE html> < html > < head > < title > HTML | DOM Style isolation Property </ title > < center > < h1 >Beginner < 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"> w3wiki </ 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 > Beginner < 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"> w3wiki </ 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 > Beginner < 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"> w3wiki </ 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 > Beginner < 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"> w3wiki </ 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