Isolation Style HTML DOM dan Fungsinya
Sebelum memahami lebih dalam materi tentang Isolation Style HTML DOM dan Fungsinya, terlebih dahulu pelajari materi tentang: Mengatur Panjang HTML Menggunakan Height Style DOM, Mengatur Ukuran Huruf HTML Menggunakan fontSizeAdjust Style DOM, dan Mengatur Ketebalan Huruf HTML Menggunakan fontWeight 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
- 4 Value Properti listStyleImage Style DOM pada HTML
- 4 Value Properti listStylePosition Style DOM pada HTML
- 5 Value Properti listStyleType DOM pada HTML
- 5 Value Properti Margin Style DOM pada HTML
- 5 Contoh Properti marginBottom Style DOM pada HTML
- 5 Value Properti marginLeft Style DOM pada HTML
5 komentar untuk "Isolation Style HTML DOM dan Fungsinya"
Hubungi admin melalui Wa : +62-896-2414-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
- Ikatlah Ilmu dengan Memostingkannya -
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