Propiedad HTML DOM offsetWidth
Ejemplo
Obtenga la altura y el ancho de un elemento <div>, incluido el relleno y el borde:
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";
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
La propiedad offsetWidth devuelve el ancho visible de un elemento en píxeles, incluido el relleno, el borde y la barra de desplazamiento, pero no el margen.
La razón por la que se especifica la palabra "visible" es porque si el contenido del elemento es más ancho que el ancho real del elemento, esta propiedad solo devolverá el ancho que es visible (consulte "Más ejemplos").
Nota: Para comprender esta propiedad, debe comprender el modelo de caja CSS .
Sugerencia: esta propiedad se usa a menudo junto con la propiedad offsetHeight .
Sugerencia: use las propiedades clientHeight y clientWidth para devolver la altura y el ancho visibles de un elemento, incluido solo el relleno.
Sugerencia: para agregar barras de desplazamiento a un elemento, use la propiedad de desbordamiento de CSS .
Esta propiedad es de sólo lectura.
Compatibilidad con navegador
Property | |||||
---|---|---|---|---|---|
offsetWidth | Yes | Yes | Yes | Yes | Yes |
Sintaxis
element.offsetWidth
Detalles técnicos
Valor de retorno: | Un número, que representa el ancho visible de un elemento en píxeles, incluido el relleno, el borde y la barra de desplazamiento. |
---|
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";
Ejemplo
Este ejemplo demuestra la diferencia entre clientHeight/clientWidth y offsetHeight/offsetWidth, cuando agregamos 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";