Lompat ke konten Lompat ke sidebar Lompat ke footer

Isolation Style HTML DOM dan Fungsinya

Properti isolation Style DOM pada HTML digunakan untuk mendefinisikan apakah suatu elemen penting untuk menciptakan konteks stack baru atau tidak.

4 Value Properti Isolation Style DOM pada HTML
Properti Isolation Style DOM

Sebelum memahami lebih dalam materi tentang Isolation Style HTML DOM dan Fungsinya, terlebih dahulu pelajari materi tentang: Mengatur Panjang HTML Menggunakan Height Style DOM [klik], Mengatur Ukuran Huruf HTML Menggunakan fontSizeAdjust Style DOM [klik], dan Mengatur Ketebalan Huruf HTML Menggunakan fontWeight Style DOM [klik].

Sintak:
  • 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.

Baca Juga:

Contoh: memperlihatkan properti auto.

<!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>


Contoh: memperlihatkan propoerti isolate.

<!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>


Contoh: memperlihatkan properti initial.

<!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>


Contoh: memperlihatkan properti inherit.

<!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>


Artikel ini didedikasikan kepada: Annisa Nurisandi, Annisathina Hermy Utami, Anugrahaning Dyah Safitri, Aqza Pradipta, dan Ar Hinza Ramadhani Putra Purwoko.

5 komentar untuk "Isolation Style HTML DOM dan Fungsinya"

  1. Jenis browser apa saja yang dapat digunakan oleh pengembang untuk mengaktifkan properti isolation Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut adalah beberapa jenis browser yang dapat digunakan oleh pengembang untuk mengaktifkan properti isolation Style DOM pada HTML:
      1. Google Chrome
      2. Firefox
      3. Opera
      4. Safari

      Hapus
  2. Apa yang dimaksud dengan properti isolation style DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti 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.

      Hapus
    2. Properti Isolation Style DOM pada HTML merupakan properti yang digunakan untuk menentukan apakah suatu elemen harus membuat konten stack baru atau tidak.

      Hapus

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 -
- Big things start from small things -