SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.
JavaScript/DOM/Element/scrollHeight
Die Eigenschaft Element.scrollHeight ermittelt die tatsächlich angezeigte Höhe eines Elements.
Syntax
const hoehe = element.scrollHeight;
- Die Eigenschaft gibt die aktuell sichtbare Höhe des Elements zurück.
Anwendungsbeispiel
<div id="aussen">
<div id="innen">
<p>Box, die kleiner als das Elternelement ist.</p>
</div>
</div>
#aussen {
height: 10em;
width: 20em;
margin: 1em;
overflow: auto;
}
#innen {
height: 15em;
width: 25em;
border: 1px solid #e7c157;
background-color: #fdfcf3;
}
Der äußere div-Container hat kleinere Abmessungen als der innere. Durch die Eigenschaft overflow: auto
werden Scrollbalken zu Verfügung gestellt.
function ermittleMaße () {
var elem = document.getElementById('innen');
var y = elem.scrollHeight;
var x = elem.scrollWidth;
document.getElementById ('ausgabe').innerHTML = 'Höhe: ' + y + 'px<br>Breite: ' + x + 'px';
}
Bei einem Klick auf den Button wird die Funktion ermittleMaße
aufgerufen. Mit Element.scrollWidth wird die Breite, mit Element.scrollHeight die akutell sichtbare Höhe des Elements ermittelt.
Weblinks
- CSSWG.org: CSSOM View Module
- MDN: Element.scrollHeight
- molily: Zusammenarbeit mit CSS, Darstellung von Dokumenten steuern – Elementbox-Größen auslesen über Microsoft-Eigenschaften (von Matthias Schäfer)