JavaScript/DOM/Element/clientWidth

Aus SELFHTML-Wiki
< JavaScript‎ | DOM‎ | Element(Weitergeleitet von GetBoundingClientRect)
Wechseln zu: Navigation, Suche

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.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • Nur Lesen / Read Only
Beachten Sie: Sie ähnelt der offsetWidth-Eigenschaft, die padding, scrollBar, und border angibt.
.

getBoundingClientRect[Bearbeiten]

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

  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
  • Nur Lesen / Read Only

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[Bearbeiten]

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

Weblinks[Bearbeiten]