Configuración de ancho y alto DIV en JavaScript

108

Tengo una divcon id="div_register". Quiero configurarlo widthdinámicamente en JavaScript.

Estoy usando este siguiente código:

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

pero esta línea de código no funciona.

También intenté usar las unidades pxcomo las siguientes, todavía sin suerte:

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

y

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

y

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

pero ninguno de este código me funciona.

No sé qué va mal.

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>

javascript Saswat
fuente

¿Ha intentado establecer el ancho después de onloadque ocurrió el evento?

Cyclonecode

1

¿Verificó que div_registeres la identificación correcta de su elemento? Quizá también nos dé algo de HTML ... style.width="500px";debería ser correcto.

powerMicha

he configurado document.getElementById ('div_register'). style.display = 'block', y luego configuré document.getElementById ('div_regsiter'). style.width = '500px';

Saswat

1

Por lo que vale, tiene errores tipográficos en la palabra "documento" en las líneas 3 y 4 de su función ... lo que definitivamente evitaría que funcione.

Daniel Szabo

1

uso en onclick="show_update_profile()"lugar deonclick="javascript:show_update_profile()"

Tejasva Dhyani

227

Es posible que las propiedades que está utilizando no funcionen en Firefox, Chrome y otros navegadores que no sean IE. Para que esto funcione en todos los navegadores, también sugiero agregar lo siguiente:

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

Para la compatibilidad cruzada, aún necesitará usar la propiedad. El orden también puede ser importante. Por ejemplo, en mi código, al configurar propiedades de estilo con JavaScript, primero configuro el atributo de estilo, luego configuro 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";

Por lo tanto, el ejemplo más compatible con varios navegadores 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 clases CSS y colocar sus estilos en archivos CSS externos. Su código no solo será mucho más fácil de mantener, sino que también 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 agregar y eliminar fácilmente 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 amplio, no necesita hurgar en su código JavaScript maravillosamente mantenido. Su código 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).

jmort253
fuente

1

¿No anulará esto todos los demás atributos de estilo? Como se menciona en un comentario a la pregunta, display: blocktambién se estableció.

powerMicha

2

Configure todo a la vez cuando utilice el atributo de estilo. En mi ejemplo de mi propio código probado y de trabajo, puse display:block;cursor:pointer;cursor:handtodo en la misma llamada setAttribute. Si desea que su vida sea más fácil, use una biblioteca JavaScript progresiva como jQuery. La única razón por la que usé JavaScript sin procesar en mi código es porque era para incrustar código en sitios web de clientes, por lo que los entornos reales diferirían de un sitio a otro, y la forma más fácil de evitar conflictos de bibliotecas en la naturaleza es simplemente no usarlos.

jmort253

1

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 estilo dándole un className fácil de trabajar.

jmort253

@jmort: +1. Pero solo en nombre de la precisión, Chrome / FireFox / Safari admiten la manipulación de los atributos en cuestión (por ejemplo: element.style.height, element.style.width, etc.)

Daniel Szabo

Hmmm, sé que en mi propio código, para que funcione bien con IE7, tuve que seguir algunos pasos muy específicos que se descubrieron a través de pruebas y errores muy dolorosos. Puede ser que IE7 no funcione correctamente con setAttribute ... No recuerdo exactamente, así que dejaré esto como un ejercicio para el lector y eliminaré la parte sobre chrome / FF, etc. Conozco el código funciona, incluso si no lo estoy explicando correctamente. :)

jmort253

14

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

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';

Valli69
fuente

1

Corrija los errores tipográficos en su código ("documento" está mal escrito en las líneas 3 y 4 de su función, y cambie el controlador de eventos onclick para que lea: onclick = "show_update_profile ()" y estará bien. Realmente debería seguir El consejo de jmort y simplemente configure 2 clases css entre las que cambiar en javascript; le facilitaría mucho la vida y le evitaría tener que escribir más. Los errores tipográficos que ha cometido son un ejemplo perfecto de por qué esto es mejor Acercarse.

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

Daniel Szabo
fuente

0

Si elimina el javascript:prefijo y elimina las partes de los ID desconocidos como 'black_fade'de su código javascript, esto debería funcionar en Firefox

Ejemplo condensado:

<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>

powerMicha
fuente

+1 sobre la eliminación de "javascript:". Esa es una construcción obsoleta de los días lejanos de la Web 1.0.

jmort253

Luego, agréguelo a su ejemplo, de lo contrario, el script fallará, por cierto: ¿Conoce el Firebugcomplemento para Firefox? Esto te ayudará mucho

powerMicha

en realidad, no había nada malo en mi script ... porque estaba usando un cuadro emergente ... eso era fuera de tema, porque mi script funcionó bien todo el tiempo, usando javascript: funcionó todo bien, puede esté desactualizado, pero esto no fue un error ... el problema fue actualizar el ancho dinámicamente ... y la solución de jmort me ayudó a encontrar la solución

Saswat

Por supuesto. Solo quería señalar que estas partes faltaban en el ejemplo, lo que conduce a otros problemas. Así que todo está bien ahora

powerMicha

-1

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

jpsimons
fuente

-1

¡Ten cuidado span!

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

Cambie spana a div.

Andy B
fuente

1

Esto se debe a que spanes un elemento en línea de forma predeterminada y, por lo tanto, no obedecerá a ningún tamaño establecido en él. Cambiar su CSS a display: block, display: flexo display: inline-blockhará que funcione correctamente como un div(un elemento de bloque por defecto).

Daniel T.

2

La pregunta nunca mencionó un lapso , y ninguna respuesta sugirió usar uno tampoco. No veo cómo esta respuesta ayude en absoluto.

Vince Bowdren

1

¡Qué raro, esto fue hace un año, así que tampoco estoy seguro de por qué! ^ _ ^

Andy B

1

Y cambia styles.widtha style.width. :)

RiZKiT

Configuración de ancho y alto DIV en JavaScript

Respuestas: