DAFTAR LABEL POPULER PENELITIAN.ID

Jangan Buka Artikel Ini!

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.

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:


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

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>


Komentar

  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

Posting Komentar

Hubungi admin melalui Wa : +62-896-2514-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 ~

Postingan populer dari blog ini (30 Hari)

Specifier %d dan %i Bahasa C dan Fungsinya

Enkapsulasi Java dan Fungsinya

4 Kesalahan Umum yang Sering Terjadi pada PTK

Cara Membuat Drag and Drop pada HTML

Postingan populer dari blog ini (All Time)

Enkapsulasi Java dan Fungsinya

Komunitas