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

Beispiel ansehen …

  <div id="aussen">
    <div id="innen">
      <p>Box, die kleiner als das Elternelement ist.</p>
    </div>
  </div>

Das Beispiel besteht aus zwei ineinander verschachtelten div-Elementen.

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

Beachten Sie: Wenn das Element kleiner ist, als der Inhalt es erfordert, also Bildlaufleisten angezeigt werden, so gibt scrollWidth die Breite des aktuell sichtbaren Ausschnittes wieder. Die gesamte Breite können Sie mit offsetWidth ermitteln.

Siehe auch

• JavaScript/Tutorials/JavaScript und CSS
  • CSS-Eigenschaften auslesen

Weblinks

• CSSWG.org: CSSOM View Module
• MDN: Element.scrollWidth