Configurando largura e altura DIV em JavaScript

108

Eu tenho um divcom id="div_register". Quero defini-lo widthdinamicamente em JavaScript.

Estou usando o seguinte código:

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

mas esta linha de código não está funcionando.

Eu também tentei usar as unidades pxcomo as seguintes, ainda sem sorte:

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

e

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

e

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

mas nenhum desse código está funcionando para mim.

Eu não sei o que está errado.

Estou usando o 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
fonte

Você já tentou definir a largura após a onloadocorrência do evento?

Cyclonecode

1

Você verificou se div_registeré o id correto do seu elemento? Talvez nos dê algum html também ... style.width="500px";deve estar certo.

powerMicha

configurei document.getElementById ('div_register'). style.display = 'block' e, em seguida, configurei document.getElementById ('div_regsiter'). style.width = '500px';

Saswat

1

Pelo que vale, você tem erros de digitação na palavra "documento" nas linhas 3 e 4 de sua função ... o que definitivamente o impediria de funcionar.

Daniel Szabo,

1

usar em onclick="show_update_profile()"vez deonclick="javascript:show_update_profile()"

Tejasva Dhyani

227

As propriedades que você está usando podem não funcionar no Firefox, Chrome e outros navegadores que não sejam IE. Para fazer isso funcionar em todos os navegadores, também sugiro adicionar o seguinte:

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

Para compatibilidade cruzada, você ainda precisará usar a propriedade. A ordem também pode ser importante. Por exemplo, em meu código, ao definir propriedades de estilo com JavaScript, defino primeiro o atributo de estilo e, em seguida, defino as propriedades:

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

Assim, o exemplo mais compatível com vários navegadores para você seria:

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

Também quero salientar que um método muito mais fácil de gerenciar estilos é usar um seletor de classe CSS e colocar seus estilos em arquivos CSS externos. Não apenas seu código será muito mais fácil de manter, mas você realmente fará amizade com seus designers da Web!

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

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

.hide {
    display:none;
}

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

Agora, posso simplesmente adicionar e remover um atributo de classe, uma única propriedade, em vez de chamar várias propriedades. Além disso, quando o Web designer deseja alterar a definição do que significa ser amplo, ele não precisa ficar mexendo em seu código JavaScript bem mantido. Seu código JavaScript permanece intocado, mas o tema de seu aplicativo pode ser facilmente personalizado.

Essa técnica segue a regra de separar seu conteúdo (HTML) de seu comportamento (JavaScript) e sua apresentação (CSS).

jmort253
fonte

1

Isso não substituirá todos os outros atributos de estilo? Conforme mencionado em um comentário à pergunta, display: blocktambém foi definido.

powerMicha

2

Defina tudo de uma vez ao usar o atributo de estilo. No meu exemplo do meu próprio código testado e funcional, coloquei display:block;cursor:pointer;cursor:handtodos na mesma chamada setAttribute. Se você deseja que sua vida seja mais fácil, use uma biblioteca JavaScript progressiva como o jQuery. O único motivo pelo qual usei JavaScript bruto em meu código é porque ele era para incorporar código em sites de clientes, de modo que os ambientes reais seriam diferentes de site para site e a maneira mais fácil de evitar conflitos de biblioteca é simplesmente não usá-los.

jmort253

1

Eu adicionei outro exemplo que usa atributos de classe. Esta técnica segue a regra de separar seu conteúdo (HTML) de seu comportamento (JavaScript) e sua apresentação (CSS). Ele também abstrai os detalhes reais do estilo, dando-lhe um className fácil de trabalhar.

jmort253

@jmort: +1. Mas, apenas em nome da precisão, Chrome / FireFox / Safari suportam a manipulação dos atributos em questão (ex: element.style.height, element.style.width, etc.)

Daniel Szabo

Hmmm, eu sei que em meu próprio código, para fazê-lo funcionar bem com o IE7, tive que seguir algumas etapas muito específicas que foram descobertas por meio de tentativa e erro muito dolorosas. Pode ser que o IE7 não funcione corretamente com setAttribute ... Não me lembro exatamente, então vou deixar isso como um exercício para o leitor e vou remover a parte sobre chrome / FF, etc. Eu sei o código funciona, mesmo que eu não esteja explicando corretamente. :)

jmort253

14

Existem várias maneiras de aplicar estilo a um elemento. Experimente qualquer um dos exemplos abaixo:

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
fonte

1

Corrija os erros de digitação em seu código ("documento" está escrito incorretamente nas linhas 3 e 4 de sua função e altere o manipulador de eventos onclick para ler: onclick = "show_update_profile ()" e então você ficará bem. Você realmente deve seguir conselho de jmort e simplesmente configurar 2 classes css entre as quais você pode alternar em javascript - tornaria sua vida muito mais fácil e evitaria toda a digitação extra. Os erros de digitação que você cometeu são um exemplo perfeito de por que isso é melhor abordagem.

Para pontos de brownie, você também deve verificar element.addEventListener para atribuir manipuladores de eventos aos seus elementos.

Daniel Szabo
fonte

0

Se você remover o javascript:prefixo e remover as partes dos ids desconhecidos, como'black_fade' do seu código javascript, isso deve funcionar no firefox

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

+1 sobre a remoção do "javascript:". Essa é uma construção desatualizada dos dias longínquos da Web 1.0.

jmort253

Em seguida, adicione-o ao seu exemplo, caso contrário, o script irá falhar - btw: Você conhece o Firebugplugin para Firefox? Isso vai te ajudar muito

powerMicha

na verdade, não havia nada de errado em meu script ... porque eu estava usando uma caixa pop-up ... que era offtopic, porque meu script funcionou bem o tempo todo, usando javascript: funcionou muito bem, pode seja um bt desatualizado, isso não era um erro ... o problema era atualizar a largura dinamicamente ... e a solução de jmort me ajudou a encontrar a solução

Saswat

Certo. Eu só queria ressaltar que essas partes estavam faltando no exemplo, o que leva a outros problemas. Então está tudo bem agora

powerMicha

-1

O onclickatributo de um botão leva uma string de JavaScript, não um href como você forneceu. Basta remover a parte "javascript:".

jpsimons
fonte

-1

Cuidado span!

myspan.styles.width='100px' não quer trabalhar.

Altere o spanpara a div.

Andy B
fonte

1

Isso ocorre porque spané um elemento embutido por padrão e, portanto, não obedece a nenhum tamanho definido nele. Alterar seu CSS para display: block, display: flexou display: inline-blockfará com que ele funcione corretamente como um div(um elemento de bloco por padrão).

Daniel T.

2

A pergunta nunca mencionou um intervalo , e nenhuma resposta sugeriu usar um também. Não vejo como essa resposta ajuda em nada.

Vince Bowdren

1

Estranho, isso foi há um ano, então não tenho certeza por que também !! ^ _ ^

Andy B

1

E mude styles.widthpara style.width. :)

RiZKiT

Configurando largura e altura DIV em JavaScript

Respostas: