HTML DOM Element clientWidth-eigenschap

Definitie en gebruik

clientWidth De eigenschap retourneert de zichtbare breedte van het element, inclusief de binnenrand, maar zonder de rand, schuifbalk of marge, in pixels.

clientWidth De eigenschap is alleen leesbaar.

Zie ook:CSS Box Model Tutorial

Zie ook:

clientHeight-eigenschap

clientTop-eigenschap

clientLeft-eigenschap

offsetHeight-eigenschap

offsetWidth-eigenschap

Om een schuifbalk toe te voegen aan een element, gebruik dan CSS Overflow Property.

Voorbeeld

Voorbeeld 1

Verkrijg de hoogte en breedte van "myDIV", inclusief de binnenrand:

const element = document.getElementById("myDIV");
let text = "clientHeight: " + element.clientHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px";

Probeer het zelf

Voorbeeld 2

Voorbeeld 2: verschil tussen clientHeight/clientWidth en offsetHeight/offsetWidth

Zonder schuifbalk:

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";

Probeer het zelf

Met schuifbalk:

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";

Probeer het zelf

Syntax

element.clientWidth

Retourwaarde

Type Beschrijving
Waarde De zichtbare breedte van het element (in pixels), inclusief de binnenrand.

Browserondersteuning

Alle browsers ondersteunen element.clientWidth:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Ondersteund Ondersteund Ondersteund Ondersteund Ondersteund Ondersteund