Cara Penggunaan Properti scrollHeight DOM pada HTML

Properti scrollHeight DOM pada HTML digunakan untuk mengembalikan nilai height dari suatu elemen. Properti scrollHeight juga menyertakan ukuran padding dan konten yang tidak terlihat pada layar selama overflow tetapi tidak termasuk ukuran border, scrollbar, atau margin. Properti scrollHeight merupakan properti read-only.

Sintak:
element.scrollHeight

Return Value: berfungsi untuk mengembalikan nilai height dari konten elemen dalam satuan pixel.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti scrollHeight DOM HTML

</title>

 

<style>

#MKN 

{

width: 250px;

height: 100px;

overflow: auto;

margin: auto;}

 

#content 

{

height: 300px;

padding: 10px;

background-color: green;

color: white;}

</style>

 

<!-- script untuk menemukan 

scroll height -->

<script>

function Bonns() 

{

var doc = document.getElementById("content");

var x = doc.scrollHeight;

document.getElementById ("p").innerHTML

= "Height: " + x + "px";

}

</script>

</head>

 

<body style = "text-align: center;">

 

<h1 

style = "color:green;">

Blog Elfan

</h1>

 

<h2>

Properti scrollHeight DOM

</h2>

 

<button 

onclick="Bonns()">

Click me!

</button>

 

<br><br>

 

<div id = "MKN">

<div id = "content">

Text content...

</div>

</div>

 

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

 

</body>

 

</html>

Output:

Blog Elfan

Properti scrollHeight DOM



Teks Konten...

Komentar

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

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

      Hapus
  2. Apa fungsi dari properti scrollHeight DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti scrollHeight DOM pada HTML berfungsi untuk mengembalikan nilai tinggi keseluruhan dari suatu elemen dalam satuan pixel, juga termasuk nilai padding, tetapi tidak termasuk nilai border, scrollbar, atau margin.

      Catatan: gunakan nilai properti scrollWidth untuk mengembalikan nilai dari keseluruhan lebar pada elemen.

      Hapus
  3. Apa perbedaan antara properti scrollHeight dan clientHeight DOM pada HTML?

    BalasHapus
    Balasan
    1. Pada clientHeight, berfungsi untuk mengembalikan nilai ketinggian elemen HTML yang termasuk juga nilai padding dalam satuan pixel tetapi tidak termasuk nilai margin, border, dan nilai scrollbar height. Sedangkan scrollHeight berfungsi untuk mengembalikan nilai ketinggian dari konten yang terlampir dalam elemen HTML yang juga termasuk nilai padding, tetapi tidak termasuk nilai margin, border, dan scrollbar.

      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