Gli ultimi tutorial di sviluppo web
 

HTML DOM offsetWidth Propery

<Oggetto Element

Esempio

Ottenere l'altezza e la larghezza di un <div> elemento, tra cui imbottitura e di confine:

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

Il risultato di txt sarà:

Height with padding and border: 280px
Width with padding and border: 430px
Prova tu stesso "

Più "Try it Yourself" esempi di seguito.

Definizione e l'utilizzo

La proprietà offsetWidth restituisce la larghezza visibile di un elemento in pixel, tra cui padding, bordo e barra di scorrimento, ma non il margine.

Il motivo per cui il "viewable" è specificato parola, è perché se il contenuto dell'elemento è più ampio rispetto alla larghezza dell'elemento, questa proprietà restituirà solo la larghezza che è visibile (See "More Examples") .

Nota: Per capire questa proprietà, è necessario comprendere il modello CSS Box .

Suggerimento: Questa struttura è spesso usato insieme al offsetHeight proprietà.

Suggerimento: utilizzare i clientHeight e clientWidth oggetti da restituire l'altezza e la larghezza visibile di un elemento, unico compreso l'imbottitura.

Suggerimento: per aggiungere barre di scorrimento per un elemento, utilizzare il CSS di overflow proprietà.

Questa proprietà è di sola lettura.

Supporto browser

Proprietà
offsetWidth sì sì sì sì sì

Sintassi

element .offsetWidth

Dettagli tecnici

Valore di ritorno: Un numero, che rappresenta la larghezza visibile di un elemento in pixel, compreso padding, border e scorrimento
Esempi

Altri esempi

Esempio

Questo esempio dimostra 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";

Il risultato di txt sarà:

Height with padding: 270px
Height with padding and border: 280px
Width with padding: 420px
Width with padding and border: 430px
Prova tu stesso "

Esempio

Questo esempio dimostra la differenza tra clientHeight / clientWidth e offsetHeight / offsetWidth, quando si aggiunge una barra di scorrimento per l'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";

Il risultato di txt sarà:

Height with padding: 249px
Height with padding, border and scrollbar: 280px
Width with padding: 399px
Width with padding, border and scrollbar: 430px
Prova tu stesso "

<Oggetto Element