javascript - dynamically - resizing iframe to fit content

¿Diferencia entre style.width y offsetwidth en HTML?

Question

Me doy cuenta de que offsetwidth es un número ligeramente mayor. Del mismo modo para el offsetheight . style.height y offsetheight .

Answer 1

Por lo general, el offsetWidth de un elemento es una medida que incluye los bordes del elemento, el relleno horizontal del elemento, la barra de desplazamiento vertical del elemento (si está presente, si se representa) y el ancho del elemento CSS.

Fuente: https://developer.mozilla.org/en/DOM/element.offsetWidth

Entonces, es el ancho de tu elemento con borde y relleno incluido. Lo mismo para la altura.

Answer 2

offsetWidth es una medida en píxeles del ancho CSS del elemento, incluidos los bordes, el relleno y las barras de desplazamiento vertical.

clientWidth es el ancho interior (es decir, el espacio dentro de un elemento que incluye el relleno pero excluyendo bordes y barras de desplazamiento)

con solo devolver el css con definido

Answer 3

offsetWidth devuelve el ancho del elemento calculado, mientras que el.style.width simplemente devuelve la propiedad de ancho definida en element.style por javascript y no refleja las dimensiones reales del elemento.

Esto significa que si intenta obtener un ancho del elemento accediendo a el.style , probablemente no obtendrá nada ( sample ), incluso si el ancho se definió en su CSS. Obtendrá el número solo si fue definido en el.style por javascript .

Además, offsetWidth le proporciona el ancho real de su elemento, incluido el padding y el border si utiliza el css box model content-box css box model que es el valor predeterminado para box-sizing . Así que puedes pensar en eso al establecer el width de los contenidos del elemento y el padding/border ir encima de eso ( sample ).

Si está utilizando el css box model cuadro de borde , el ancho total del elemento, incluido el padding y el border hace que el área de contenido sea más pequeña ( sample ). Por lo tanto, en este caso, offsetWidth y el.style.width devolverían exactamente los mismos números (si el.style.width fue previamente establecido por javascript ).