Configuración de ancho y alto de DIV en JavaScript

Tengo un div con id="div_register". Quiero establecer su width dinámicamente en JavaScript.Configuración de ancho y alto de DIV en JavaScript

estoy usando este siguiente código:

getElementById('div_register').style.width=500;

pero esta línea de código no está funcionando.

también probé usando las unidades px como la siguiente, sigue sin suerte:

getElementById('div_register').style.width='500px';

getElementById('div_register').style.width='500';

getElementById('div_register').style.width=500px;

pero ninguno de este código está trabajando para yo.

No sé lo que está pasando.

Estoy usando Mozilla Firefox.

EDITAR

<html> 
    <head> 
     <title>Untitled</title> 
     <script> 
      function show_update_profile() { 
       document.getElementById('black_fade').style.display='block'; 
       //document.getElementById.('div_register').style.left=((window.innerWidth)-500)/20; 
       document.getElementById('div_register').style.height= "500px"; 
       document.getElementById('div_register').style.width= '500px'; 
       //alert('kutta'); 
        document.getElementById('div_register').style.display='block'; 
       document.getElementById('register_flag').value= 1; 
       document.getElementById('physical_flag').value= 0; 
       document.getElementById('cultural_flag').value= 0; 
       document.getElementById('professional_flag').value= 0; 
       document.getElementById('lifestyle_flag').value= 0; 
       document.getElementById('hobby_flag').value= 0; 
       //alert(window.innerWidth); 
      } 
     </script> 
     <style> 
      .white_content { 
       display:none; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="main"> 
      <input type="button" onclick="javascript:show_update_profile();" id="show" name="show" value="show"/> 
     </div> 
     <div id="div_register"> 
      <table cellpadding="0" cellspacing="0" border="0"> 
       <tr> 
        <td> 
         welcome 
        </td> 
       </tr> 
      </table> 
     </div> 
    </body> 
</html>

Fuente

2012-04-12 Saswat

¿Ha intentado establecer el ancho después de que se haya producido el evento 'onload'? – Cyclonecode

¿Ha comprobado que 'div_register' es la identificación correcta de su elemento? Tal vez también nos dé algunos html ... 'style.width =" 500px ";' debería estar bien. – powerMicha

configuré document.getElementById ('div_register'). Style.display = 'block', y luego configuré document.getElementById ('div_regsiter'). Style.width = '500px'; – Saswat

158

Las propiedades que está utilizando puede no funcionar en Firefox, Chrome y otros navegadores no-IE. Para que esto funcione en todos los navegadores, pero pienso que deben de añadir el siguiente:

document.getElementById('div_register').setAttribute("style","width:500px");

Para compatibilidad cruzada, todavía tendrá que utilizar la propiedad. El orden también puede importar. Por ejemplo, en mi código, al establecer las propiedades de estilo con JavaScript, puse el atributo de estilo en primer lugar, luego establecer las propiedades:

document.getElementById("mydiv").setAttribute("style","display:block;cursor:pointer;cursor:hand;"); 
document.getElementById("mydiv").style.display = "block"; 
document.getElementById("mydiv").style.cursor = "hand";

Así, el ejemplo compatible entre navegadores para usted sería:

document.getElementById('div_register').setAttribute("style","display:block;width:500px"); 
document.getElementById('div_register').style.width='500px';

También quiero señalar que un método mucho más fácil de administrar estilos es usar un selector de clase CSS y poner sus estilos en archivos CSS externos. No solo su código será mucho más fácil de mantener, ¡sino que se hará amigo de sus diseñadores web!

document.getElementById("div_register").setAttribute("class","wide"); 

.wide { 
    display:block; 
    width:500px; 
} 

.hide { 
    display:none; 
} 

.narrow { 
    display:block; 
    width:100px; 
}

Ahora, puedo simplemente agregar y eliminar un atributo de clase, una sola propiedad, en lugar de llamar a varias propiedades. Además, cuando su diseñador web quiere cambiar la definición de lo que significa ser ancho, no necesita hurgar en su código JavaScript, que se mantiene de manera hermosa. Su código de JavaScript permanece intacto, sin embargo, el tema de su aplicación se puede personalizar fácilmente.

Esta técnica sigue la regla de separar su contenido (HTML) de su comportamiento (JavaScript) y su presentación (CSS).

Fuente

2012-04-12 06:05:00 jmort253

¿Esto no prevalecerá sobre todos los demás atributos de estilo? Como se mencionó en un comentario a la pregunta, 'display: block' también se configuró. – powerMicha

Configure todo a la vez cuando use el atributo de estilo. En mi ejemplo de mi propio código probado y funcional, puse 'display: block; cursor: puntero; cursor: hand' todo en la misma llamada a setAttribute. Si desea que su vida sea más fácil, use una biblioteca progresiva de JavaScript como jQuery. La única razón por la que utilicé JavaScript sin formato en mi código es porque era para insertar código en los sitios web de los clientes, por lo que los entornos reales diferirían de un sitio a otro, y la forma más fácil de evitarlos es simplemente no usarlos. – jmort253

Agregué otro ejemplo que usa atributos de clase. Esta técnica sigue la regla de separar su contenido (HTML) de su comportamiento (JavaScript) y su presentación (CSS). También abstrae los detalles reales del diseño dándole un fácil de trabajar con className. – jmort253

-1

El atributo onclick de un botón toma una cadena de JavaScript, no un href como el que nos proporcionó. Simplemente elimine la parte "javascript:".

Fuente

2012-04-12 06:28:02 jpsimons

Si se quita el prefijo javascript: y eliminar las partes de los identificadores desconocidos como 'black_fade' desde el código Javascript, esto debería funcionar en Firefox

ejemplo Condensada:

<html> 
    <head> 
     <script type="text/javascript"> 
      function show_update_profile() { 
       document.getElementById('div_register').style.height= "500px"; 
       document.getElementById('div_register').style.width= "500px"; 
       document.getElementById('div_register').style.display='block'; 
       return true; 
      } 
     </script> 
     <style> 
      /* just to show dimensions of div */ 
      #div_register 
      { 
       background-color: #cfc; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="main"> 
      <input type="button" onclick="show_update_profile();" value="show"/> 
     </div> 
     <div id="div_register"> 
      <table> 
       <tr> 
        <td> 
        welcome 
        </td> 
       </tr> 
      </table> 
     </div> 
    </body> 
</html>

Fuente

2012-04-12 06:50:34 powerMicha

+1 al eliminar el "javascript:".Esa es una construcción obsoleta de los días desaparecidos de la Web 1.0. – jmort253

necesito div_fade – Saswat

Entonces por favor agréguela a su ejemplo, de lo contrario la secuencia de comandos fallará - por cierto: ¿Conoce el complemento 'Firebug' para Firefox? Esto te ayudará mucho – powerMicha

Fijar los errores tipográficos en el código ("documento" se deletrea incorrectamente en las líneas 3 & 4 de su función y cambie el controlador de evento onclick para que diga: onclick = "show_update_profile()" y entonces estará bien. Debería seguir realmente el consejo de jmort y simplemente configurar 2 clases de CSS que cambias entre javascript - es Haría su vida mucho más fácil y se salvaría de todos los tipeos extra. Los errores tipográficos que has cometido son un ejemplo perfecto de por qué este es el mejor enfoque.

Para puntos de brownie, también debe consultar element.addEventListener para asignar controladores de eventos a sus elementos.

Fuente

2012-04-12 07:01:08

Estas son varias formas de aplicar estilo a un elemento. Pruebe cualquiera de los siguientes ejemplos:

1. document.getElementById('div_register').className = 'wide'; 
    /* CSS */ .wide{width:500px;} 
2. document.getElementById('div_register').setAttribute('class','wide'); 
3. document.getElementById('div_register').style.width = '500px';

Fuente

2012-04-12 08:17:26 Valli69

Tenga cuidado de span!

myspan.styles.width='100px' no quiere funcionar.

Cambie el span a un div.

Fuente

2015-09-11 14:49:56

Esto es porque 'span' es un elemento en línea por defecto, y por lo tanto no obedecerá ningún tamaño establecido en él. Cambiar su CSS a 'display: block',' display: flex', o 'display: inline-block' hará que funcione correctamente como un' div' (un elemento de bloque por defecto). –

La pregunta nunca mencionó a * span *, y ninguna respuesta sugirió usar una tampoco. No veo cómo esta respuesta ayuda en absoluto. –

Raro, esto fue hace un año, así que no estoy seguro de por qué tampoco !!^_ ^ –

Configuración de ancho y alto de DIV en JavaScript

Respuesta

Cuestiones relacionadas