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.
Sintak:
element.scrollHeight
Return Values: berfungsi untuk mengembalikan nilai height dari konten elemen dalam satuan pixel.
Contoh:
 |
| 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].
element.scrollHeight
Baca Juga:
<!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...
Referensi Tambahan:
- Cara Penggunaan Properti tagName DOM pada HTML [klik]
- 2 Contoh Penggunaan Properti textContent DOM pada HTML [klik]
- 7 Nilai dari Properti Koordinat Geolokasi DOM pada HTML [klik]
- 2 Nilai Return Properti Geolokasi Posisi DOM pada HTML [klik]
- Cara Penggunaan Method History.back() DOM pada HTML [klik]
- Cara Penggunaan Method History.forward() DOM pada HTML [klik]
- 2 Contoh Penggunaan Method History.go() DOM pada HTML [klik]
Artikel ini didedikasikan kepada: Muchamad Bima Purnama, Muchamad Tegar Suseno, Muhamad Bayu Irawan, Muhammad Farhanudin, dan Muhammad Minaur Rohman.
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti scrollHeight DOM pada HTML?
BalasHapusBerikut beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti scrollHeight DOM pada HTML:
Hapus1. Google Chrome 4.0
2. Internet Explorer 8.0
3. Firefox 3.0
4. Opera
5. Safari 4.0
Apa fungsi dari properti scrollHeight DOM pada HTML?
BalasHapusProperti 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.
HapusCatatan: gunakan nilai properti scrollWidth untuk mengembalikan nilai dari keseluruhan lebar pada elemen.
Apa perbedaan antara properti scrollHeight dan clientHeight DOM pada HTML?
BalasHapusPada 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