DOM樣式隔離屬性定義元素是否必須創建新的堆棧上下文。
用法:
- 返回隔離語法:
object.style.isolation
- 設置隔離語法:
object.style.isolation = "auto|isolate|initial|inherit"
屬性:
- auto:它是默認屬性值。使用此屬性,如果應用於元素的屬性之一需要,則僅創建一個新的堆棧上下文。
- isolate:它指出必須創建一個新的堆棧上下文,而不會出現任何故障。
- initial:它將隔離屬性設置為其默認值。
- inherit:它繼承了父元素的隔離屬性值。
返回值:它返回元素的堆疊上下文。
示例1:顯示自動屬性。
<!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>
輸出:
- 在單擊按鈕之前:
- 單擊按鈕後:
示例2:顯示隔離屬性。
<!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>
輸出:
- 在單擊按鈕之前:
- 單擊按鈕後:
示例3:顯示初始屬性。
<!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>
輸出:
- 在單擊按鈕之前:
- 單擊按鈕後:
示例4:顯示繼承屬性。
<!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>
輸出:
- 在單擊按鈕之前:
- 單擊按鈕後:
注意:Internet Explorer不支持此屬性。
瀏覽器支持:DOM隔離屬性支持的瀏覽器如下:
- 穀歌瀏覽器
- Firefox
- Opera
- Safari
相關用法
- CSS isolation屬性用法及代碼示例
- HTML Style top用法及代碼示例
- HTML Style right用法及代碼示例
- HTML Style minWidth用法及代碼示例
- HTML Style border用法及代碼示例
- HTML Style backgroundAttachment用法及代碼示例
- HTML Style outlineColor用法及代碼示例
- HTML Style quotes用法及代碼示例
- HTML Style emptyCells用法及代碼示例
- HTML Style perspectiveOrigin用法及代碼示例
- HTML Style borderLeftColor用法及代碼示例
- HTML Style backgroundPosition用法及代碼示例
- HTML Style borderImageWidth用法及代碼示例
- HTML Style orphans用法及代碼示例
- HTML Style borderTopColor用法及代碼示例
注:本文由純淨天空篩選整理自riarawal99大神的英文原創作品 HTML | DOM Style isolation Property。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。