HTML DOM offsetWidth Propiedad

元素对象参考手册Objeto de elemento

Ejemplo

Obtener el ancho del elemento div, incluyendo el relleno (padding) y el borde (border):

var elmnt = document.getElementById("myDIV"); var txt = "Altura del elemento div, incluyendo el relleno (padding) y el borde (border):" + elmnt.offsetHeight + "px<br>"; txt += "Ancho del elemento div, incluyendo el relleno (padding) y el borde (border):" + elmnt.offsetWidth + "px";

Pruébalo »

Definición y uso

La propiedad offsetWidth es una propiedad de solo lectura que devuelve el ancho en píxeles del elemento. Dicho ancho incluye el relleno (padding) y el borde (border), pero no incluye el margen (margin). Es un número entero en píxeles (px).

Normalmente, offsetWidth de un elemento es una medida del ancho CSS del elemento, que incluye el borde, el relleno y la barra de desplazamiento horizontal del elemento (si existe y está renderizada), sin incluir:beforeo:afterel ancho de los pseudo-elementos, etc.

Para el objeto body del documento, incluye la altura total de contenido lineal en lugar del ancho CSS del elemento. El ancho del contenido que se extiende hacia abajo de los elementos flotantes se ignora.

Si el elemento está oculto (por ejemplo: el elemento o uno de sus antepasados tiene la propiedadstyle.displayestablecida ennone), devuelve 0.

Nota:Para comprender esta propiedad, consulteel modelo de caja CSS。

Consejo:Esta propiedad se usa normalmente junto con laoffsetHeightpropiedad.

Consejo:Use clientHeightyclientWidthlas propiedades para devolver la altura y el ancho visibles del elemento, incluyendo solo el relleno (padding).

Consejo:Para agregar una barra de desplazamiento a un elemento, puede usar laoverflowpropiedad.

Esta es una propiedad de solo lectura.

Compatibilidad del navegador

Propiedad
offsetWidth Yes Yes Yes Yes Yes

Sintaxis

element. offsetWidth

Detalles técnicos

Valor de retorno: Devuelve un número entero que representa el ancho en píxeles del elemento.

Más ejemplos

Ejemplo

El siguiente ejemplo demuestra la diferencia entre las propiedades clientHeight/clientWidth y offsetHeight/offsetWidth:

var elmnt = document.getElementById("myDIV"); var txt = ""; txt += "Altura incluyendo el relleno (padding):" + elmnt.clientHeight + "px<br>"; txt += "Altura incluyendo el relleno (padding) y el borde (border):" + elmnt.offsetHeight + "px<br>"; txt += "Ancho incluyendo el relleno (padding):" + elmnt.clientWidth + "px<br>"; txt += "Ancho incluyendo el relleno (padding) y el borde (border):" + elmnt.offsetWidth + "px";

Pruébalo »

Ejemplo

El siguiente ejemplo demuestra la diferencia entre las propiedades clientHeight/clientWidth y offsetHeight/offsetWidth después de agregar una barra de desplazamiento al elemento:

var elmnt = document.getElementById("myDIV"); var txt = ""; txt += "<b>Información de estilo del div:</b><br>"; txt += "Altura incluyendo el relleno (padding):" + elmnt.clientHeight + "px<br>"; txt += "Altura incluyendo el relleno (padding), el borde (border) y la barra de desplazamiento:" + elmnt.offsetHeight + "px<br>"; txt += "Ancho incluyendo el relleno (padding):" + elmnt.clientWidth + "px<br>"; txt += "Ancho incluyendo el relleno (padding), el borde (border) y la barra de desplazamiento:" + elmnt.offsetWidth + "px";

Pruébalo »

元素对象参考手册Objeto de elemento

Otras extensiones