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/scrollWidth
Die Eigenschaft Element.scrollWidth ermittelt die Breite eines HTML-Elements oder dessen Inhalts, je nachdem welcher Wert größer ist.
Syntax
const breite = element.scrollWidth;
- Die Eigenschaft gibt die aktuell sichtbare Breite 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;
}
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.
Siehe auch
- JavaScript und CSS
- CSS-Eigenschaften auslesen
Weblinks
- CSSWG.org: CSSOM View Module
- MDN: Element.scrollWidth