Larghezza client dell'elemento HTML DOM
❮ L'oggetto elementoEsempio
Ottieni l'altezza e la larghezza di "myDIV", incluso il riempimento:
const elmnt = document.getElementById("myDIV");
let text = "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px";
Altri esempi di seguito.
Definizione e utilizzo
La clientWidth
proprietà restituisce la larghezza visualizzabile di un elemento in pixel, incluso il riempimento, ma non il bordo, la barra di scorrimento o il margine.
La clientWidth
proprietà è di sola lettura.
Esercitazione:
Guarda anche:
La proprietà dell'elemento clientHeight
La proprietà offsetHeight dell'elemento
La proprietà offsetWidth dell'elemento
Per aggiungere barre di scorrimento a un elemento, utilizza la proprietà CSS overflow .
Sintassi
element.clientWidth
Valore di ritorno
Tipo | Descrizione |
Numero | La larghezza visualizzabile di un elemento (in pixel) compreso il riempimento. |
La differenza tra clientHeight/clientWidth e offsetHeight/offsetWidth
Senza una barra di scorrimento:
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";
Con una barra di scorrimento:
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";
Supporto browser
element.clientWidth
è supportato in tutti i browser:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes | Yes |
❮ L'oggetto elemento