In MDNs Beschreibung von Element.clientWidth steht.
Hinweis: Ich habe MDN seit dem @potatopeelings Antwort.
Die Element.clientWidth-Eigenschaft ist die innere Breite eines Elements in Pixeln. Es enthält Padding, aber nicht die vertikale Bildlaufleiste (falls vorhanden, wenn gerendert), Rahmen oder Rand.
Diese Eigenschaft rundet den Wert auf eine ganze Zahl ab. Wenn Sie einen Bruchwert benötigen, verwenden Sie element.getBoundingClientRect ().
Daraus ergibt sich, dass das andere als das Runden von clientWidth dasselbe wie getBoundingClientRect().width sein sollte.
Allerdings sehe ich, dass für viele Elemente (wo display ist inline ?) die clientWidth (und Höhe) Null sind, während die von getBoundingClientRect zurückgegebenen Werte korrekt erscheinen.
Die Suche nach stackoverflow bringt einige Antworten, die sagen, dass dies geschieht, bevor das Dokument in einem bereiten Zustand ist, aber ich sehe es immer, nicht nur wenn die Seite geladen wird.
Dieses Verhalten ist konsistent für alle Browser, die ich überprüft habe. Wo wurde angegeben, dass dies das Verhalten sein sollte?
Beispiel:
Aus der Spezifikation ( Ссылка )
Das Attribut clientWidth muss diese Schritte ausführen:
1.Wenn dem Element keine CSS-Layoutbox zugeordnet ist oder die CSS-Layoutbox inline ist , geben Sie null zurück.
...
Zusätzlich zu @ Potatopeelings Antwort:
Inline-Elemente haben keine intrinsischen oder spezifizierten Dimensionen. Z.B. Sie können keine Breite für span definieren (es sei denn, Sie ändern ihre Eigenschaft display ).
Auch clientWidth und getBoundingClientRect dienen unterschiedlichen Zwecken und können unterschiedliche Werte zurückgeben. Letzteres berücksichtigt auch Transformationen und gibt die Dimensionen eines Elements so zurück, wie es tatsächlich gerendert wird.
Wenn clientWidth in diesem Fall 1000 zurückgibt, dann wäre die Breite von getBoundingClientRect 500.
Sie können clientWidth als "wie viel Platz habe ich innerhalb des Elements verfügbar" und getBoundingClientRect als "wie viel Platz belegt das Element auf dem Bildschirm" betrachten. In unserem Fall hätte das Element also genug Platz, um zwei 500px-Elemente nebeneinander zu enthalten, und es würde 500px auf dem Bildschirm belegen.
Der zurückgegebene Wert von getBoundingClientRect () ist ein DOMRect-Objekt, das die Union der Rechtecke ist, die von getClientRects () für das Element zurückgegeben werden; Diese Methode betrachtet die Dimension des Begrenzungsrahmens auch dann, wenn das Element inline ist (es hat nicht die Begrenzung für Inline-Elemente, die clientWidth - specs @potatopeelings-Verknüpfungen hat).
Überprüfen Sie den Unterschied, wenn Sie die Anzeigeeigenschaft in inline-block oder block ändern.
Tags und Links javascript html css