DAFTAR LABEL POPULER PENELITIAN.ID

Jangan Buka Artikel Ini!

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

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:


Komentar

  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

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