Mengembalikan tinggi total konten elemen, dalam piksel. Nilai berisi ketinggian dengan padding, tetapi tidak termasuk scrollBar, batas, dan margin
Jika scrollbar horizontal ditampilkan, maka properti scrollHeight mengembalikan tinggi konten dengan tinggi scrollbar horizontal di Opera
- Jika Anda memerlukan ketinggian area yang terlihat untuk suatu objek, gunakan properti clientHeight atau offsetHeight
- Cara lain untuk mendapatkan ketinggian objek adalah dengan menggunakan metode getBoundingClientRect. Ini mengembalikan persegi panjang pembatas objek tanpa margin
Anda dapat mengatur ketinggian elemen dengan properti gaya height, pixelHeight, dan posHeight. Nilai ketinggian dalam hal ini berisi tinggi konten yang terlihat dengan scrollbar horizontal, tetapi tanpa padding, border, dan margin. Anda bisa mendapatkan nilai properti gaya ketinggian di unit yang berbeda dengan properti ini, bukan tinggi elemen yang dirender
Perhatikan bahwa properti scrollWidth dan scrollHeight khusus untuk elemen html. Mereka mengembalikan ukuran total dokumen, meskipun jika tinggi dokumen lebih kecil dari tinggi area klien browser, html. properti scrollHeight mengembalikan ketinggian area klien di Firefox
Jika Anda memerlukan ukuran area klien browser, gunakan properti clientWidth dan clientHeight dari elemen html
Berhati-hatilah dengan properti scrollHeight dari elemen html
Di Internet Explorer lebih awal dari versi 8, ini mengambil tinggi dalam ukuran piksel fisik, sedangkan dari versi 8, mengembalikan tinggi dalam ukuran piksel logis
Apa artinya?Jika browser tidak pada tingkat zoom normal (pengguna memiliki kemampuan untuk memperbesar atau memperkecil halaman web. CTRL dan +, CTRL dan -), properti scrollHeight bekerja secara berbeda dari versi 8 daripada versi sebelumnya
- Ketinggian dihitung dalam ukuran piksel default di Internet Explorer sebelum versi 8 meskipun ukuran piksel saat ini dalam dokumen berbeda
- Dari Internet Explorer 8 dan di Firefox, Opera, Google Chrome, dan Safari, tingginya dihitung dalam ukuran piksel saat ini
Jika Anda memerlukan contoh yang menunjukkan cara mendapatkan tingkat zoom, silakan lihat halaman untuk properti clientHeight
- Untuk mendapatkan lebar dokumen atau elemen dalam dokumen, gunakan properti clientWidth, offsetWidth, atau scrollWidth
- Jika Anda memerlukan posisi elemen, Anda dapat menggunakan properti offsetLeft, offsetTop, dan metode getBoundingClientRect
Sintaksis
obyek. scrollTinggi;
Anda dapat menemukan objek terkait di bagian di bawah ini
Properti ini bersifat hanya baca
Jika Anda ingin menambahkan bilah gulir ke elemen HTML, setel properti gaya limpahan ke 'otomatis' atau 'gulir'
Perhatikan bahwa baik properti gaya luapan maupun properti scrollHeight tidak berfungsi untuk elemen HTML yang jenis tampilannya sebaris. Ada beberapa elemen HTML (elemen HTML sebaris), yang tipe tampilannya sebaris secara default (seperti. a, rentang, b, img dll. ). Jika Anda perlu menggunakan properti gaya luapan atau properti scrollHeight dari elemen HTML sebaris, setel properti gaya tampilan ke 'blokir'
Nilai yang mungkin
Bilangan bulat yang mewakili tinggi, dalam piksel
Bawaan. properti ini tidak memiliki nilai default
Contoh kode HTML1
Contoh ini mengilustrasikan penggunaan properti scrollHeight
<head> <style> #container { width: 350px; height: 150px; margin: 10px; border: 2px solid red; padding: 0px; overflow: auto; } .inner { width: 1000px; height: 1000px; } </style> <script type="text/javascript"> function GetContainerSize () { var container = document.getElementById ("container"); var message = "The width of the contents width padding: " + container.scrollWidth + "px.\n"; message += "The height of the contents width padding: " + container.scrollHeight + "px.\n"; alert (message); } </script> </head> <body> <div id="container"> <div class="inner" align="left"> This element is inside the container.<br /> The width and height of the element is 1000px<br /> The container element has the following style definitions:<br /> margin: 10px; border: 2px solid red; padding: 0px; </div> </div> <button title="GetContainerSize ();">Get the size of the container's content!</button> </body>
Salin CodePrintPreviewSyntax HighlighterApakah menurut Anda contoh ini bermanfaat? yes no
Contoh kode HTML2
Contoh ini mengilustrasikan penggunaan properti clientWidth, clientHeight, scrollWidth, scrollHeight, scrollLeft, scrollTop, dan event onscroll
<head> <script type="text/javascript"> function DisplayCurrentScroll () { var div = document.getElementById ("scrollDiv"); var info = document.getElementById ("info"); info.rows[1].cells[4].innerHTML = div.scrollLeft; info.rows[2].cells[4].innerHTML = div.scrollTop; } function DisplayInfo () { var div = document.getElementById ("scrollDiv"); var info = document.getElementById ("info"); info.rows[1].cells[1].innerHTML = div.scrollWidth; info.rows[2].cells[1].innerHTML = div.scrollHeight; info.rows[1].cells[2].innerHTML = div.clientWidth; info.rows[2].cells[2].innerHTML = div.clientHeight; info.rows[1].cells[3].innerHTML = div.scrollWidth - div.clientWidth; info.rows[2].cells[3].innerHTML = div.scrollHeight - div.clientHeight; DisplayCurrentScroll (); } function OnScrollDiv () { DisplayCurrentScroll (); } </script> </head> <body onload="DisplayInfo ()"> <div id="scrollDiv" style="width:200px;height:200px; overflow:auto;" onscroll="OnScrollDiv ()"> Please scroll this field! <div style="height:300px; width:2000px; background-color:#a08080;"></div> Please scroll this field! <div style="height:300px; width:2000px; background-color:#a08080;"></div> Please scroll this field! </div> <br /><br /> <table id="info" border="1px"> <thead> <tr> <th></th> <th>Total size</th> <th>Client size</th> <th>Max scroll position</th> <th>Current scroll position</th> </tr> </thead> <tbody> <tr> <td><b>Horizontal</b></td> <td></td><td></td><td></td><td></td> </tr> <tr> <td><b>Vertical</b></td> <td></td><td></td><td></td><td></td> </tr> </tbody> </table> </body>_
Salin CodePrintPreviewSyntax HighlighterApakah menurut Anda contoh ini bermanfaat? yes no
Didukung oleh objek
elemen HTML
a, abbr, acronym, address, b, bdo, big, blink, blockquote, body, button, caption, center, cite, code, dd, del, dfn, dir, div, dl, dt, em, fieldset, font,