HTML | DOM Style isolation Property Last Updated : 08 Aug, 2022 Comments Improve Suggest changes Like Article Like Report The DOM Style isolation Property defines whether an element must necessarily create a new stacking context. Syntax: Return isolation syntax:object.style.isolationSet 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 41Edge 79Firefox 36Opera 30Safari 8 Comment More infoAdvertise with us R riarawal99 Follow Improve Article Tags : Web Technologies HTML HTML-DOM Similar Reads HTML | DOM touchcancel Event The touchcancel event is used to execute a script when the touch event gets interrupted. It is considered a good practice to include the touchcancel event to clean up the code if the devices interrupt a touch event at different actions.Supported Tags All HTML elements supported by this event. Suppor 1 min read HTML DOM childNodes Property The childNodes property returns a node's child nodes as a nodeList object. White spaces and comments are also considered as nodes. The nodes are assigned index numbers, starting from 0. Searching and sorting operations can be performed using index number on the node list. Syntax: elementNodeReferenc 2 min read HTML DOM MouseEvent pageX Property The MouseEvent.pageX property returns the horizontal coordinate (in pixels) of the mouse pointer, relative to the entire document (not just the viewport), when a mouse event occurs. This value includes any horizontal scrolling that has been doneSyntax: event.pageXReturn Values: It returns the horizo 1 min read HTML | DOM MouseEvent offsetY Property The MouseEvent offsetY property is a read-only property and is used for returning the y-coordinate of the mouse pointer, relative to the target element. The MouseEvent offsetY property returns a number which represents the vertical coordinate of the mouse pointer, in pixels with respect to the scree 1 min read HTML | DOM TouchEvent ctrlKey Property The TouchEvent ctrlKey property is a read-only property and used for returning a Boolean value which indicates whether or not the "CTRL" key was pressed when a touch event was triggered. It mostly returns false because generally, touch devices do not have a ctrl key. Syntax : event.ctrlKey Return Va 2 min read HTML DOM MouseEvent screenX Property The MouseEvent.screenX property is used to get the horizontal coordinate (in pixels) of the mouse pointer relative to the screen, not the viewport when a mouse event occurs. This value represents the distance from the left edge of the user's screen to the mouse pointer's position.Syntax :event.scree 1 min read HTML | DOM Style fontSizeAdjust Property The fontSizeAdjust property controls better the font size if the first choice of font is not available. It sets or returns the font aspect value of the text. Aspect value is the size difference between the lowercase letter "x" and the uppercase letter "X". Syntax: To set the fontSizeAdjust propertyo 2 min read HTML DOM compareDocumentPosition() Method The DOM compareDocumentPosition() method is used to compare two nodes and it returns an integer describing where they are positioned in the document. Syntax: node1.compareDocumentPosition(node2) Return Value : This return an integer value and their meaning as follows : 1: This means that the two nod 3 min read HTML | DOM touchstart Event The touchstart event is used to execute a script whenever the user touches an HTML element. On touching a particular element, if the touchstart event is associated with it, it can be used to trigger a javascript function. Note: The touchstart event works only on touch screen devices.Supported Tags A 1 min read HTML DOM Image Object The HTML DOM Image object represents an HTML <img> element, allowing for dynamic manipulation of images in the document. This object provides various properties and methods to change image attributes like src, alt, width, height, and more, as well as handling image events such as onload and on 2 min read Like