Proprietà offsetWidth dell'elemento DOM HTML

Definizione e uso

offsetWidth La proprietà restituisce la larghezza visibile dell'elemento (in pixel), inclusi i margini interni, i bordi e le barre di scorrimento, ma escludendo i margini esterni.

offsetWidth Le proprietà sono solo in lettura.

Vedi anche:Tutorial del modello di finestra CSS

offsetParent

Tutti gli elementi bloccanti riportano l'offset rispetto al genitore di offset:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

Il genitore di offset è il più vicino antenato con posizione non statica.

Se non esiste un genitore di offset, l'offset è rispetto al testo del documento.

Vedi anche:

Proprietà offsetHeight

Proprietà offsetParent

Proprietà offsetTop

Proprietà offsetLeft

Proprietà clientTop

Proprietà clientLeft

Proprietà clientWidth

Proprietà clientHeight

Esempio

Esempio 1

Ottieni l'altezza e la larghezza di "myDIV", inclusi i margini interni e i bordi:

const elmnt = document.getElementById("myDIV");
let text = "Altezza con spaziatura e bordo: " + elmnt.offsetHeight + "px<br>";
text += "Larghezza con margine e bordo: " + elmnt.offsetWidth + "px";

Prova tu stesso

Esempio 2

Differenza tra clientHeight/clientWidth e offsetHeight/offsetWidth

Senza barra di scorrimento:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Altezza con margine: " + elmnt.clientHeight + "px<br>";
text += "Altezza con margine e bordo: " + elmnt.offsetHeight + "px<br>";
text += "Larghezza con margine: " + elmnt.clientWidth + "px<br>";
text += "Larghezza con margine e bordo: " + elmnt.offsetWidth + "px";

Prova tu stesso

Con barra di scorrimento:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Altezza con margine: " + elmnt.clientHeight + "px<br>";
text += "Altezza con margine, bordo e barra di scorrimento: " + elmnt.offsetHeight + "px<br>";
text += "Larghezza con margine: " + elmnt.clientWidth + "px<br>";
text += "Larghezza con margine, bordo e barra di scorrimento: " + elmnt.offsetWidth + "px";

Prova tu stesso

Sintassi

element.offsetWidth

Valore di ritorno

Tipo Descrizione
Numero L'ampiezza visibile dell'elemento (in pixel), inclusi il margine interno, il bordo e la barra di scorrimento.

Supporto del browser

Tutti i browser supportano element.offsetWidth:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto Supporto