Configurando largura e altura DIV em JavaScript
Eu tenho um divcom id="div_register". Quero defini-lo widthdinamicamente em JavaScript.
mas esta linha de código não está funcionando.
Eu também tentei usar as unidades pxcomo as seguintes, ainda sem sorte:
mas nenhum desse código está funcionando para mim.
Eu não sei o que está errado.
Estou usando o Mozilla Firefox.
— Saswat
Você já tentou definir a largura após a onloadocorrência do evento?
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';
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,
usar em onclick="show_update_profile()"vez deonclick="javascript:show_update_profile()"
— Tejasva Dhyani
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:
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:
Assim, o exemplo mais compatível com vários navegadores para você seria:
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!
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).
Isso não substituirá todos os outros atributos de estilo? Conforme mencionado em um comentário à pergunta, display: blocktambém foi definido.
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.
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.
@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. :)
Existem várias maneiras de aplicar estilo a um elemento. Experimente qualquer um dos exemplos abaixo:
— Valli69
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.
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:
+1 sobre a remoção do "javascript:". Essa é uma construção desatualizada dos dias longínquos da Web 1.0.
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
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
Certo. Eu só queria ressaltar que essas partes estavam faltando no exemplo, o que leva a outros problemas. Então está tudo bem agora
O onclickatributo de um botão leva uma string de JavaScript, não um href como você forneceu. Basta remover a parte "javascript:".
— jpsimons
Cuidado span!
myspan.styles.width='100px' não quer trabalhar.
Altere o spanpara a div.
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).
A pergunta nunca mencionou um intervalo , e nenhuma resposta sugeriu usar um também. Não vejo como essa resposta ajuda em nada.