Lompat ke konten Lompat ke sidebar Lompat ke footer

Mengembalikan Nilai Tinggi Gulir HTML Menggunakan scrollHeight DOM

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.

Cara Penggunaan Properti scrollHeight DOM pada HTML
Ilustrasi scrollHeight DOM HTML

Sebelum memahami lebih dalam materi tentang Mengembalikan Nilai Tinggi Gulir HTML Menggunakan scrollHeight DOM, terlebih dahulu pelajari materi tentang: Mengganti Node Child HTML Menggunakan replaceChild DOM [klik], Menghapus Node Child HTML Menggunakan removeChild DOM [klik], dan Menghapus Node Atribut HTML removeAttributeNode DOM [klik].

Sintak:
element.scrollHeight

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

Baca Juga:

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...

Artikel ini didedikasikan kepada: Muchamad Bima Purnama, Muchamad Tegar Suseno, Muhamad Bayu Irawan, Muhammad Farhanudin, dan Muhammad Minaur Rohman.

6 komentar untuk "Mengembalikan Nilai Tinggi Gulir HTML Menggunakan scrollHeight DOM"

  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

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 -