Proprietà clientWidth dell'elemento HTML DOM

Definizione e uso

clientWidth L'attributo restituisce l'ampiezza visibile dell'elemento, inclusi i margini interni, ma escludendo i bordi, le barre di scorrimento o i margini esterni, in pixel.

clientWidth L'attributo è readonly.

Vedi anche:Tutorial CSS Box Model

Vedi anche:

Proprietà clientHeight

Proprietà clientTop

Proprietà clientLeft

Proprietà offsetHeight

Proprietà offsetWidth

Per aggiungere una barra di scorrimento all'elemento, utilizzare Proprietà overflow CSS.

Esempio

Esempio 1

Ottieni altezza e larghezza di "myDIV", inclusi i margini interni:

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

Prova da solo

Esempio 2

Esempio 2: differenza tra clientHeight/clientWidth e offsetHeight/offsetWidth

Senza barra di scorrimento:

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";

Prova da solo

Con barra di scorrimento:

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";

Prova da solo

Sintassi

element.clientWidth

Valore di ritorno

Tipo Descrizione
Valore numerico L'ampiezza visibile dell'elemento (in pixel), inclusi i margini interni.

Supporto del browser

Tutti i browser supportano element.clientWidth:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Supportato Supportato Supportato Supportato Supportato Supportato