JavaScript/DOM/Element/clientWidth

Die Eigenschaft clientWidth speichert die Breite, clientHeight die Höhe des sichtbaren Bereichs mit dem padding, aber ohne die Maße für scrollBar, border und margin.

Beachten Sie:

Sie ähnelt der offsetWidth-Eigenschaft, die padding, scrollBar, und border angibt.

• Verwenden Sie scrollWidth, wenn Sie die totale Breite eines Elements benötigen. Es gibt die Breite mit padding, aber ohne scrollBar, border und margin zurück.
• Eine Alternative ist die getBoundingClientRect()-Methode, die die bounding box des Elements ohne margin zurückgibt.

.

getBoundingClientRect

Die Element.getBoundingClientRect()-Methode gibt die Größe und Position eines Elements relativ zur Größe des Viewports zurück.

Syntax

rectObject = element.getBoundingClientRect(node);

• rectObject: Rückgabewert ist ein DOMRect-Objekt, das left, top, right, bottom, x, y, width, height-Eigenschaften besitzt, die ausgelesen werden können.
  Alle Eigenschaften außer width and height sind relativ zur oberen linken Ecke (top-left) des Viewports.

Beachten Sie: Die clientwidth-Eigenschaft berechnet einen ganzzahligen Wert. Verwenden Sie getBoundingClientRect(), wenn Sie genauere Angaben benötigen.

Anwendungsbeispiel

Mit der getBoundingClientRect-Methode können Sie einen Seiteninspektor erstellen:

Beispiel ansehen …

function ermittleWerte(event) {
    var elem = event.target,
        name = elem.nodeName,
        left = 'left: ' + elem.getBoundingClientRect().left + ' px<br>',
        top = 'top: ' + elem.getBoundingClientRect().top + ' px<br>',
        right = 'right: ' + elem.getBoundingClientRect().right + ' px<br>',
        bottom = 'bottom: ' + elem.getBoundingClientRect().bottom + ' px<br>',
        width = 'width: ' + elem.getBoundingClientRect().width + ' px<br>',
        height = 'height: ' + elem.getBoundingClientRect().height + ' px<br>',
        text = '<h3>' + name + '</h3>' + left + right + top + bottom + width + height;	
	  
    document.getElementById('ergebnis').innerHTML = text;
}

An das main-Elemenrt wird mit addEventListener ein Eventhandler angefügt, sodass beim Überfahren oder beim Klick mit der Maus die Funktion ermittleWerte() aufgerufen wird.
Diese Funktion ermittelt mit event.target das Element, durch das das Ereignis ausgelöst wurde. Von diesem Element werden jetzt mit getBoundingClientRect() die einzelnen Eigenschaften abgefragt, in einer Variaben text zusammengefügt und anschließend ausgegeben.

ansehen …

Beachten Sie, dass die Werte im CSS in em festgelegt wurden - mit getBoundingClientRect() aber in px ermittelt werden.
Es wäre schöner, wenn die ausgegebenen Werte mit toFixed nur 2 oder 3 Nachkommastellen erhielten; es sollte in diesem Beispiel aber die Genauigkeit demonstriert werden.

Siehe auch

• JavaScript/Tutorials/Akkordeon mit details
  Um das Auf- und Zuklappen eines details-Elements zu animieren, wird zuerst mit getBoundingClientRect() die Höhe der Box einmal im geöffneten und einmal im geschlossenen Zustand ermittelt.

Weblinks

• CSSWG: CSSOM getBoundingClientRect
• MDN: Element.getBoundingClientRect
• MSDN: getBoundingClientRect method
• ejohn: getBoundingClientRect is Awesome von John Resig