Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Mendapatkan Parent Offset HTML Menggunakan offsetParent DOM

Dipublikasikan Oleh: elfanmauludi 5 komentar
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.


Sebelum memahami lebih dalam materi tentang Mendapatkan Parent Offset HTML Menggunakan offsetParent DOM, terlebih dahulu pelajari materi tentang: Mendapatkan Offset Kiri HTML Menggunakan offsetLeft DOM, Mendapatkan Lebar Offset HTML Menggunakan offsetWidth DOM, dan Menentukan Panjang Offset HTML Menggunakan offsetHeight DOM.

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


Artikel ini didedikasikan kepada: Lulu Khaitsuma Kunta Itaqillah, Luqman Hakim Satria Wicaksana, Luthfiyyah Nur Hanty, M. Muktamamul Ula, dan M.Khaidar Rafi Rahmaputra.
Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Mendapatkan Parent Offset HTML Menggunakan offsetParent DOM"

  1. AnonimSabtu, 26 Februari 2022 pukul 08.13.00 WIB

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

    BalasHapus
    Balasan
    1. AnonimSabtu, 26 Februari 2022 pukul 08.15.00 WIB

      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. AnonimSenin, 28 Februari 2022 pukul 15.41.00 WIB

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

    BalasHapus
    Balasan
    1. AnonimSenin, 28 Februari 2022 pukul 15.41.00 WIB

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

      Hapus
    2. AnonimSenin, 28 Februari 2022 pukul 15.43.00 WIB

      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

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 -