ClientWidth des HTML-DOM-Elements
❮ Das Element-ObjektBeispiel
Holen Sie sich die Höhe und Breite von "myDIV", einschließlich Polsterung:
const elmnt = document.getElementById("myDIV");
let text = "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px";
Weitere Beispiele unten.
Definition und Verwendung
Die clientWidth
Eigenschaft gibt die sichtbare Breite eines Elements in Pixel zurück, einschließlich Padding, aber nicht des Rahmens, der Bildlaufleiste oder des Rands.
Die clientWidth
Eigenschaft ist schreibgeschützt.
Lernprogramm:
Siehe auch:
Die clientHeight-Eigenschaft des Elements
Die OffsetHeight-Eigenschaft des Elements
Die OffsetWidth-Eigenschaft des Elements
Um einem Element Bildlaufleisten hinzuzufügen, verwenden Sie die CSS- Überlaufeigenschaft .
Syntax
element.clientWidth
Rückgabewert
Typ | Beschreibung |
Nummer | Die sichtbare Breite eines Elements (in Pixel) einschließlich Padding. |
Der Unterschied zwischen clientHeight/clientWidth und offsetHeight/offsetWidth
Ohne Scrollbalken:
const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";
Mit Scrollbalken:
const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";
Browser-Unterstützung
element.clientWidth
wird in allen Browsern unterstützt:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes | Yes |
❮ Das Element-Objekt