Isolation Style HTML DOM dan Fungsinya
 |
| Properti Isolation Style DOM |
- berfungsi untuk mengembalikan nilai properti isolation: object.style.isolation
- berfungsi untuk mengatur nilai properti isolation: object.style.isolation = "auto|isolate|initial|inherit"
Property Values:
- auto: merupakan nilai default dari properti isolation, yang digunakan untuk menciptakan konteks stacking baru.
- isolate: merupakan sebuah states yang menginstruksikan untuk menciptakan stack baru tanpa ada kesalahan apapun.
- initial: digunakan untuk mengembalikan properti isolation ke nilai default-nya.
- inherit: digunakan untuk menerima nilai turunan dari properti isolasi yang berasal dari elemen parent.
Return Values: berfungsi untuk mengembalikan konteks stack dari suatu elemen.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style isolation DOM
pada HTML
</title>
<center>
<h1>
Bon
<button
onclick="isolation()">
Press
</button>
</h1>
<h2>
Properti Isolation DOM
</h2>
</center>
<h4>
Klik tombol 'Press' untuk
mengatur nilai properti
menjadi '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="mnn1" class="p">
<div id="d">
<div class="p P">
Blog Elfan
</div>
</div>
</div>
<script>
function isolation()
{
document.getElementById(
"d").style.isolation = "auto";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style isolation DOM
pada HTML
</title>
<center>
<h1>
Bon
<button
onclick="isolation()">
Press
</button>
</h1>
<h2>
Properti Isolation DOM
</h2>
</center>
<h4>
Klik tombol 'Press' untuk
mengatur nilai properti
menjadi '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="nkk2" class="p">
<div id="d">
<div class="p P">
Blog Elfan
</div>
</div>
</div>
<script>
function isolation()
{
document.getElementById(
"d").style.isolation = "isolate";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style isolation DOM
HTML
</title>
<center>
<h1>
Bons
<button
onclick="isolation()">
Press
</button>
</h1>
<h2>
Properti Isolation DOM
</h2>
</center>
<h4>
Klik tombol 'Press' untuk
mengatur nilai properti
menjadi '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="kk3" class="p">
<div id="d">
<div class="p P">
Blog Elfan
</div>
</div>
</div>
<script>
function isolation()
{
document.getElementById(
"d").style.isolation = "initial";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style isolation DOM
pada HTML
</title>
<center>
<h1>
Bons
<button
onclick="isolation()">
Press
</button>
</h1>
<h2>
Properti Isolation DOM
</h2>
</center>
<h4>
Klik tombol 'Press' untuk
mengatur nilai properti
menjadi '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="nn4" class="p">
<div id="d">
<div class="p P">
Blog Elfan
</div>
</div>
</div>
<script>
function isolation()
{
document.getElementById(
"d").style.isolation = "inherit";
}
</script>
</body>
</html>
- 5 Value Properti listStyle DOM pada HTML [klik]
- 4 Value Properti listStyleImage Style DOM pada HTML [klik]
- 4 Value Properti listStylePosition Style DOM pada HTML [klik]
- 5 Value Properti listStyleType DOM pada HTML [klik]
- 5 Value Properti Margin Style DOM pada HTML [klik]
- 5 Contoh Properti marginBottom Style DOM pada HTML [klik]
- 5 Value Properti marginLeft Style DOM pada HTML [klik]
Jenis browser apa saja yang dapat digunakan oleh pengembang untuk mengaktifkan properti isolation Style DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan oleh pengembang untuk mengaktifkan properti isolation Style DOM pada HTML:
Hapus1. Google Chrome
2. Firefox
3. Opera
4. Safari
Apa yang dimaksud dengan properti isolation style DOM pada HTML?
BalasHapusProperti Isolation Style DOM pada HTML merupakan properti yang digunakan untuk menentukan apakah elemen harus membuat konten susun baru atau tidak. Properti Isolation digunakan untuk mencegah elemen untuk menyatu di bagian latar belakang dengan membuat elemen stack yang terpisah.
HapusProperti Isolation Style DOM pada HTML merupakan properti yang digunakan untuk menentukan apakah suatu elemen harus membuat konten stack baru atau tidak.
Hapus