Propiedad de ancho de estilo
Ejemplo
Establezca el ancho de un elemento <button>:
document.getElementById("myBtn").style.width = "300px";
Definición y uso
La propiedad ancho establece o devuelve el ancho de un elemento.
La propiedad de ancho tiene efecto solo en elementos a nivel de bloque o en elementos con posición absoluta o fija. El contenido desbordado se puede manipular con la propiedad de desbordamiento.
Sugerencia: use la propiedad de altura para establecer o devolver la altura de un elemento.
Compatibilidad con navegador
Property | |||||
---|---|---|---|---|---|
width | Yes | Yes | Yes | Yes | Yes |
Sintaxis
Devuelve la propiedad de ancho:
object.style.width
Establezca la propiedad de ancho:
object.style.width = "auto|length|%|initial|inherit"
Valores de propiedad
Value | Description |
---|---|
auto | The browser sets the width. This is default |
length | Defines the width in length units |
% | Defines the width in % of the parent element |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Detalles técnicos
Valor por defecto: | auto |
---|---|
Valor de retorno: | Una cadena, que representa el ancho de un elemento. |
Versión CSS | CSS1 |
Más ejemplos
Ejemplo
Cambiar el ancho de un elemento <div>:
document.getElementById("myDIV").style.width = "500px";
Ejemplo
Cambiar la altura y el ancho de un elemento <img>:
document.getElementById("myImg").style.height = "300px";
document.getElementById("myImg").style.width = "300px";
Ejemplo
Devuelve el ancho de un elemento <img>:
alert(document.getElementById("myImg").style.width);
páginas relacionadas
Tutorial CSS: Dimensión CSS
Tutorial de CSS: modelo de caja CSS
Referencia CSS: propiedad de ancho
❮ Objeto de estilo