Proprietà clientWidth di HTML DOM

Oggetto Elemento HTML DOM

clientWidthProprietà di sola lettura che restituisce la larghezza visibile dell'elemento (in pixel), inclusi i margini, ma escludendo i margini, i margini di pagina e la barra di scorrimento verticale (se presente).

La formula di calcolo di clientWidth è la seguente: larghezza CSS + padding CSS - larghezza della barra di scorrimento verticale (se presente).

Per comprendere questa proprietà, è necessario conoscereModello di scatola CSS.

UtilizzareoffsetWidthL'attributo restituisce la larghezza visibile dell'elemento, inclusi i margini, i bordi e la barra di scorrimento verticale.

Sintassi:

element.clientWidth

var elem = document.querySelector("div");
var txt = \
txt += \

Compatibilità del browser

Tutti i browser supportano completamente la proprietà clientWidth:

Dettagli tecnici

Più esempi

Questo esempio dimostra la differenza tra clientWidth e offsetWidth:

var elem = document.querySelector("div");
var txt = "Larghezza inclusa riempimento: " + elem.clientWidth + "px<br>";
txt += "Larghezza inclusa riempimento+bordo: " + elem.offsetWidth + "px";

Riferimenti correlati

Riferimento HTML DOM:Proprietà offsetWidth HTML DOM

Riferimento HTML DOM:Proprietà scrollWidth HTML DOM

Riferimento CSS:Proprietà overflow CSS

Oggetto Elemento HTML DOM