Pregunta Establecer ancho y alto de DIV en JavaScript


tengo un div con id="div_register". Quiero establecer su width dinámicamente 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 intenté usar las unidades px como el siguiente, todavía no hay 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é lo que está pasando 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>

75
2018-04-12 06:02


origen


Respuestas:


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 importar. Por ejemplo, en mi código, cuando establezco propiedades de estilo con JavaScript, configuro primero el atributo de estilo, luego establezco 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 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 agregar y eliminar fácilmente un atributo de clase, una única propiedad, en lugar de llamar a propiedades múltiples. 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).


166
2018-04-12 06:05



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

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

12
2018-04-12 08:17



Corrija los errores tipográficos en su código ("documento" se escribe mal en las líneas 3 y 4 de su función, y cambie el controlador de eventos onclick para que diga: onclick = "show_update_profile ()" y entonces estará bien. Realmente debería seguir El consejo de jmort y simplemente configurar 2 clases de CSS en las que cambies en javascript, te facilitarán mucho la vida y te ahorrarás el tipeo 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 deberías echarle un vistazo element.addEventListener para asignar manejadores de eventos a tus elementos.


1
2018-04-12 07:01



Si eliminas el javascript: prefija y elimine las partes para los ID desconocidos, como 'black_fade' desde 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>

0
2018-04-12 06:50



Ten cuidado de span!

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

Cambiar el span a un div.


0
2017-09-11 14:49



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


-1
2018-04-12 06:28