HTML DOM Element clientBreedte
❮Het Element-ObjectVoorbeeld
Verkrijg de hoogte en breedte van "myDIV", inclusief opvulling:
const elmnt = document.getElementById("myDIV");
let text = "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px";
Hieronder meer voorbeelden.
Definitie en gebruik
De clientWidth
eigenschap retourneert de zichtbare breedte van een element in pixels, inclusief opvulling, maar niet de rand, schuifbalk of marge.
De clientWidth
eigenschap is alleen-lezen.
Zelfstudie:
Zie ook:
De Element clientHeight Property
De eigenschap Element offsetHeight
De eigenschap Element offsetWidth
Gebruik de CSS- overloopeigenschap om schuifbalken aan een element toe te voegen .
Syntaxis
element.clientWidth
Winstwaarde
Type | Beschrijving |
Nummer | De zichtbare breedte van een element (in pixels) inclusief opvulling. |
Het verschil tussen clientHeight/clientWidth en offsetHeight/offsetWidth
Zonder schuifbalk:
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";
Met een schuifbalk:
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";
Browserondersteuning
element.clientWidth
wordt ondersteund in alle browsers:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes | Yes |
❮Het Element-Object