Establecer el ancho o la altura del elemento en modo estándar

123

¿Es posible establecer el ancho o la altura del elemento HTML (ej. <div>) En JavaScript en modo estándar?

Tenga en cuenta el siguiente código:

<html>
<script language="javascript" type="text/javascript">
    function changeWidth(){
        var e1 = document.getElementById("e1");
        e1.style.width = 400;
    } 
</script>
<body>
    <input type="button" value="change width" onclick="changeWidth()"/>
    <div id="e1" style="width:20px;height:20px; background-color:#096"></div>
</body>
</html>

Cuando el usuario presiona el botón de cambio de ancho , el <div>ancho del 's debería cambiar.

Funciona bien cuando la declaración de doctype determina el modo peculiar. En el modo de normas, no puedo cambiar el tamaño del elemento de esta manera

¿Es posible manipular el tamaño de un elemento en el modo de estándares? ¿Cómo evitar esta disfuncionalidad?

— desenfrenado
fuente

191

Intente declarar la unidad de ancho:

e1.style.width = "400px"; // width in PIXELS

— Alexandre Perez
fuente

1

Jajaja .. quiero decir "miau" (c). He pasado aproximadamente una hora, tratando de descubrir por qué no se aplica el estilo. ¡Gracias!

— Vitalii Vasylenko

1

Vale la pena mencionar que el ancho no incluye márgenes, y cuando box-sizing: border-box;, el ancho incluirá bordes, de lo contrario, el ancho no incluye bordes.

— Qian Chen

39

La stylepropiedad le permite especificar valores para las propiedades CSS.

La widthpropiedad CSS toma una longitud como su valor.

Las longitudes requieren unidades. En el modo peculiar, los navegadores tienden a asumir píxeles si se les proporciona un número entero en lugar de una longitud. Especificar unidades.

e1.style.width = "400px";

— Quentin
fuente