Proprietà HTML DOM offsetWidth
Esempio
Ottieni l'altezza e la larghezza di un elemento <div>, inclusi spaziatura interna e bordo:
var elmnt = document.getElementById("myDIV");
var txt = "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
La proprietà offsetWidth restituisce la larghezza visualizzabile di un elemento in pixel, inclusi spaziatura interna, bordo e barra di scorrimento, ma non il margine.
Il motivo per cui viene specificata la parola "visualizzabile" è perché se il contenuto dell'elemento è più largo della larghezza effettiva dell'elemento, questa proprietà restituirà solo la larghezza che è visibile (vedi "Altri esempi").
Nota: per comprendere questa proprietà, è necessario comprendere il CSS Box Model .
Suggerimento: questa proprietà viene spesso utilizzata insieme alla proprietà offsetHeight .
Suggerimento: utilizza le proprietà clientHeight e clientWidth per restituire l'altezza e la larghezza visualizzabili di un elemento, includendo solo il riempimento.
Suggerimento: per aggiungere barre di scorrimento a un elemento, utilizza la proprietà CSS overflow .
Questa proprietà è di sola lettura.
Supporto browser
Property | |||||
---|---|---|---|---|---|
offsetWidth | Yes | Yes | Yes | Yes | Yes |
Sintassi
element.offsetWidth
Dettagli tecnici
Valore di ritorno: | Un numero, che rappresenta la larghezza visualizzabile di un elemento in pixel, inclusi riempimento, bordo e barra di scorrimento |
---|
Altri esempi
Esempio
Questo esempio mostra la differenza tra clientHeight/clientWidth e offsetHeight/offsetWidth:
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
Esempio
Questo esempio mostra la differenza tra clientHeight/clientWidth e offsetHeight/offsetWidth, quando aggiungiamo una barra di scorrimento all'elemento:
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";