Lompat ke konten Lompat ke sidebar Lompat ke footer

Menentukan Panjang Offset HTML Menggunakan offsetHeight DOM

Properti offsetHeight DOM pada HTML digunakan untuk mengembalikan layout height dari elemen sebagai nilai integer atau bilangan bulat. Properti offsetHeight diukur dalam satuan pixel, yang termasuk bidang pengukurannya adalah height, border, padding, dan scrollbar horizontal tapi bukan margin. Jika elemen yang diukur oleh properti offsetHeight disembunyikan maka akan mengembalikan nilai 0.

2 Contoh Penggunaan Properti offsetHeight DOM pada HTML
Ilustrasi offsetHeight DOM HTML

Sebelum memahami lebih dalam materi tentang Menentukan Panjang Offset HTML Menggunakan offsetHeight DOM, terlebih dahulu pelajari materi tentang: Mendapatkan Nilai Node HTML Menggunakan nodeValue DOM [klik], Mendapatkan Tipe Node HTML Menggunakan nodeType DOM [klik], dan Mendapatkan Nama Node HTML Menggunakan nodeName DOM [klik].

Sintak:
element.offsetHeight

Return Values: berfungsi untuk mengembalikan layout height dari elemen sebagai nilai bilangan bulat.

Baca Juga:

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti Style offsetHeight 

DOM

</title>

 

<style>

#MKN 

{

height: 150px;

width: 300px;

padding: 10px;

margin: 15px;

background-color: green;}

</style>

</head>

 

<body>

 

<h2>

Properti offsetHeight DOM

</h2>

 

<div id="MKN">

<b>

Informasi tentang div:

</b>

<p id="sudo"></p>

</div>

 

<button 

type="button" 

onclick="Bons()">

Submit

</button>

 

<script>

function Bons() 

{

var element = document.getElementById("MKN");

 

var txt = "Height termasuk"

+ "juga padding dan border: "

+ element.offsetHeight 

+ "px";

 

document.getElementById("sudo").innerHTML = txt;

}

</script>

 

</body>

 

</html>

Output:

Properti offsetHeight DOM

Informasi tentang div:



Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti Style offsetHeight 

DOM

</title>

 

<style>

#MKN 

{

height: 150px;

width: 300px;

padding: 10px;

margin: 15px;

background-color: green;}

</style>

</head>

 

<body>

 

<h2>

Properti offsetHeight DOM

</h2>

 

<div id="MKN">

 

<b>

Informasi tentang div:

</b>

 

<br>

 

<p id="sudo"></p>

 

</div>

 

<button 

type="button" 

onclick="Bons()">

Submit

</button>

 

<script>

function Bons() 

{

var element = document.getElementById("MKN");

 

var txt = "";

 

txt += "Height with padding: "

+ element.clientHeight 

+ "px<br>";

 

txt += "Height with padding"

+ " and border: "

+ element.offsetHeight 

+ "px";

 

document.getElementById("sudo").innerHTML = txt;

}

</script>

 

</body>

 

</html>

Output:

Properti offsetHeight DOM

Informasi tentang div:


Artikel ini didedikasikan kepada: Lathifah Khairunnisa, Lintang Khairana, Ludmila Jasmine Abiwardani, Lulu Khaitsuma Kunta Itaqillah, dan Luqman Hakim Satria Wicaksana.

5 komentar untuk "Menentukan Panjang Offset HTML Menggunakan offsetHeight DOM"

  1. Jenis browser apa saja yang dapat digunakan untuk mengaktifkan method offsetHeight() DOM pada HTML?

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

      Hapus
  2. Apa fungsi properti offsetHeight DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti read-only offsetHeight DOM pada HTML berfungsi untuk mengembalikan nilai ketinggian pada suatu elemen, termasuk nilai padding vertikal, dan border sebagai nilai bilangan bulat. Properti offsetHeight merupakan bentuk pengukuran dalam elemen pixel height CSS, yang juga termasuk ukuran dalam padding, berder, dan scrollbar horizontal jika dilakukan render.

      Hapus
    2. Properti offsetHeight merupakan properti DOM HTML yang digunakan oleh bahasa pemrograman JavaScript. Properti ini berfungsi untuk mengembalikan ketinggian elemen yang terlihat dalam pixel yang mencakup ukuran tinggi konten yang visible, border, padding, dan scrollbar jika ada. Penggunaan properti offsetHeight sering digunakan bersamaan dengan properti offsetWidth.

      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 -