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

Menentukan Panjang Offset HTML Menggunakan offsetHeight DOM

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


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, Mendapatkan Tipe Node HTML Menggunakan nodeType DOM, dan Mendapatkan Nama Node HTML Menggunakan nodeName DOM.

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.
Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

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

  1. AnonimKamis, 24 Februari 2022 pukul 07.55.00 WIB

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

    BalasHapus
    Balasan
    1. AnonimKamis, 24 Februari 2022 pukul 07.56.00 WIB

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

    Apa fungsi properti offsetHeight DOM pada HTML?

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

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

      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 -