Los últimos tutoriales de desarrollo web
 

HTML DOM offsetWidth Propery

<Elemento de objeto

Ejemplo

Obtener la altura y la anchura de un <div> elemento, incluido el relleno y la frontera:

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

El resultado de txt será:

Height with padding and border: 280px
Width with padding and border: 430px
Inténtalo tú mismo "

Más "Try it Yourself" ejemplos a continuación.

Definición y Uso

La propiedad offsetWidth devuelve el ancho visible de un elemento en píxeles, incluyendo relleno, borde y barra de desplazamiento, pero no el margen.

La razón por la cual la "viewable" se especifica la palabra, es porque si el contenido del elemento es más ancha que la anchura real del elemento, esta propiedad sólo devolverá el ancho que es visible (See "More Examples") .

Nota: Para entender esta propiedad, usted debe entender el modelo de caja CSS .

Consejo: Esta propiedad se utiliza a menudo junto con el offsetHeight propiedad.

Consejo: Utilice los clientHeight y clientWidth propiedades para volver la altura visible y la anchura de un elemento, solamente incluyendo el relleno.

Consejo: Para añadir barras de desplazamiento a un elemento, utilice el CSS desbordamiento de propiedad.

Esta propiedad es de solo lectura.

Soporte del navegador

Propiedad
offsetWidth Sí Sí Sí Sí Sí

Sintaxis

element .offsetWidth

Detalles técnicos

Valor de retorno: Un número, que representa la anchura visible de un elemento en píxeles, incluyendo relleno, borde y barra de desplazamiento
Ejemplos

Más ejemplos

Ejemplo

Este ejemplo demuestra la diferencia entre clientHeight / clientWidth y 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";

El resultado de txt será:

Height with padding: 270px
Height with padding and border: 280px
Width with padding: 420px
Width with padding and border: 430px
Inténtalo tú mismo "

Ejemplo

Este ejemplo demuestra la diferencia entre clientHeight / clientWidth y offsetHeight / offsetWidth, cuando añadimos una barra de desplazamiento al 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";

El resultado de txt será:

Height with padding: 249px
Height with padding, border and scrollbar: 280px
Width with padding: 399px
Width with padding, border and scrollbar: 430px
Inténtalo tú mismo "

<Elemento de objeto