2 Contoh Penggunaan Properti offsetParent DOM pada HTML

Properti offsetParent DOM pada HTML digunakan untuk mengembalikan elemen ancestor terdekat pada dokumen HTML, dimana elemen ancestor tersebut wajib memiliki posisi tertentu dari pada bersifat static. Properti offestParent mengembalikan nilai null dari suatu elemen yang diatur dengan tipe display="none". Method offsetParent tidak memiliki nilai default apapun pada pengoperasiannya. Properti offsetParent sangat berguna pada HTML karena properti offsetParent memiliki posisi relatif terhadap padding edge.

Sintak:
object.offsetParent;

Contoh: mengembalikan properti offsetParent.

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti Elemen offsetParent 

DOM HTML

</title>

</head>

 

<body>

 

<div id = "MKN">

 

<h1>

Blog Elfan

</h1>

 

<button onclick="myBons()">

Click Here!

</button>

 

<p>

offsetParent:

<span id="bonns"></span>

</p>

 

</div>

 

<!-- Script untuk 

mengembalikan offsetParent -->

<script>

function myBons() 

{

// Mengembalikan offsetParent 

// dari div

var offsetp =

document.getElementById("MKN");

 

document.getElementById("bonns").innerHTML =

offsetp.offsetParent;

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

offsetParent:


Contoh: menggunakan properti display untuk menyembunyikan nilai offsetParent.

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti Elemen offsetParent 

DOM

</title>

 

<style>

#MKN 

{

display: none;}

</style>

</head>

 

<body>

 

<div id = "g4g">

 

<h1 id = "MKN">

Blog Elfan

</h1>

 

<button onclick="myBons()">

Click Here!

</button>

 

<p>

offsetParent:

<span id="bonns"></span>

</p>

 

</div>

 

<!-- Script untuk 

mengembalikan offsetParent -->

<script>

function myBons() 

{

// Mengembalikan offsetParent 

// dari div

var offsetp =

document.getElementById("MKN");

 

document.getElementById("bonns").innerHTML =

offsetp.offsetParent;

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

offsetParent:

Komentar

  1. Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti offsetParent DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktif properti offsetParent DOM pada HTML:
      1. Google Chrome
      2. Internet Explorer
      3. Firefox
      4. Opera
      5. Safari

      Hapus
  2. Apa yang dimaksud dengan properti offsetParent beserta fungsinya pada DOM HTML?

    BalasHapus
    Balasan
    1. Properti offsetParent DOM pada HTML berfungsi untuk mengembalikan nilai ancestor terdekat yang memiliki posisi selain static.

      Hapus
    2. Properti atau method offsetParent() memungkinkan user untuk melakukan penelusuran terhadap elemen-elemen ancestor pada tree DOM dan membangun object jQuery baru yang dililitkan pada sekitar ancestor yang diposisikan paling dekat. Suatu elemen dikatakan telah diposisikan jika memiliki atribut posisi CSS yang bersifat relative, absolute, atau fix.

      Hapus

Posting Komentar

*Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung. :D

*Jika terdapat typo, link bermasalah, dan lain sebagainya, pengunjung dapat melaporkan permasalahan tersebut melalui WA: +62-896-2514-6106




~ Ikatlah Ilmu dengan Memostingkannya ~

Referensi Tambahan:

Enkapsulasi pada Java

2 Jenis Utama Kegiatan Penelitian Berdasarkan Waktunya, Crosssectional Salah Satunya

6 Contoh Program Method Overloading pada Java

3 Jenis Utama Looping pada Java

Perbedaan stdio.h dan stdlib.h pada Bahasa C