JavaScript/DOM/Element/clientWidth
Aus SELFHTML-Wiki
< JavaScript | DOM | Element(Weitergeleitet von GetBoundingClientRect)
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 diebounding box
des Elements ohne margin zurückgibt.
Inhaltsverzeichnis
getBoundingClientRect[Bearbeiten]
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 einDOMRect
-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;
}
Beachten Sie,
dass die Werte im CSS in em festgelegt wurden - mit
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.
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[Bearbeiten]
- 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[Bearbeiten]
- CSSWG: CSSOM getBoundingClientRect
- MDN: Element.getBoundingClientRect
- MSDN: getBoundingClientRect method
- ejohn: getBoundingClientRect is Awesome von John Resig
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 Variabentext
zusammengefügt und anschließend ausgegeben.