Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Oi Pessoas!
Eu estava brincando com CSS+JS e me apareceu algo "inconveniente".
Fiz um script que aumenta e diminui o tamanho do <div>, modificando o valor do "style.height" pelo JS.
Mas o problema é que, ao abrir a pagina, o JS não acha o valor desse height, no exemplo abaixo eu coloquei um alert na entrada da página e outro no momento em que você clica no <div> para "abrir" ou "fechar".
Se vocês observarem ao entrar na página o valor do height tá em branco, só depois de clicar nos <div> é que o valor é definido.
<html><style>#um, #dois, #tres{height: 30px;width: 150px;}#um {background: #000;}#dois{margin-top: 2px;background: #666;}#tres{margin-top: 2px;background: #F00;}</style><script>function aumenta(nome){ if(nome.style.height=='30px'){ nome.style.height='200px'; nome.style.width='150px'; alert(nome.style.height); return 0; } else{ nome.style.height='30px'; nome.style.width='150px'; alert(nome.style.height); return 0; }}</script><body><div id="um" onMouseDown="aumenta(this);"></div><div id="dois" onMouseDown="aumenta(this);"></div><div id="tres" onMouseDown="aumenta(this);"></div><script>alert(document.getElementById("um").style.height);</script></body></html>Gostaria de saber o porquê disto acontecer...
Valeu!
Olha... todas as propriedades de ".style." são referentes à propriedades de estilo CSS! Quando você dá um "alert" em "style.height" e aparece vazio é porquê você não definiu essa propriedade no CSS... se você tivesse definido apareceria algo do tipo "200px"! smile.gif Essa propriedade não possui um valor padrão, por isso aparece vazio!
VAleu a ajuda aí dmarcos, mãs não é por causa disso não. hheehe. Se fosse assim, não apareceria ao executar o onmousedown :)Isso acontece pois ao chegar e executar o script de alert que tá lá embaixo perto do body, o navegador ainda não terminou de carregar completamente a página (onload). Já na hora que ocorre o onmousedown, o navegador já carregou tudo belezinha.A solução para isto é chamar o alert apenas no evendo onload do elemento body. Mais informações é só pesquisar sobre o onload aqui no fórum mesmo.té mais...
Ah é?!
<html> <head> <title>Página de Testes</title> <head> <body> <div id="divTeste"> Isso é uma DIV </div> </body></html><script> alert(document.getElementById("divTeste").style.height);</script>
Roda ai e me explica pq o alert aparece vazio então! ;)
(Editado)
Ah... o script dele está após a declaração dos DIVs... portanto eles já foram criados e já possuem todas as propriedades! :)
(/Editado)
Se você usar <div id="um" style="height: 30px; width: 150px;" onMouseDown="aumenta(this);"></div>vai funcionar.Definido na tag <style> o JS não consegue ler valores na tag apartir desta tag. Testado e comprovado aqui... de varias maneiras... com class, id etc...
Roda ai e me explica pq o alert aparece vazio então!
heheh. Uai dmarcos, não aparece pois NÃO HÁ nenhum estilo css neste código que você mostrou. ehehe. aí fica difícil...Mas o Fleury fechou o assunto. Ele tá certo.
Concluindo e respondendo à dúvida do rapaz: Pra poder acessar esta característica visual que foi definida por style não inline ele deverá usar o offsetHeight .
Código refeito usando o offsetHeight (testado no FF e OK):
<script>function aumenta(nome){ if(nome.style.height=='30px'){ nome.style.height='200px'; nome.style.width='150px'; alert(nome.offsetHeight); return 0; } else{ nome.style.height='30px'; nome.style.width='150px'; alert(nome.offsetHeight); return 0; }}</script><body><div id="um" onMouseDown="aumenta(this);"></div><div id="dois" onMouseDown="aumenta(this);"></div><div id="tres" onMouseDown="aumenta(this);"></div><script>alert(document.getElementById("um").offsetHeight);</script></body></html>PS:Ah... o script dele está após a declaração dos DIVs... portanto eles já foram criados e já possuem todas as propriedades!
Realmente, você tá certo.
...Quando você dá um "alert" em "style.height" e aparece vazio é porquê você não definiu essa propriedade no CSS... se você tivesse definido apareceria algo do tipo "200px"!...
>
Roda ai e me explica pq o alert aparece vazio então!
heheh. Uai dmarcos, não aparece pois NÃO HÁ nenhum estilo css neste código que você mostrou. ehehe. aí fica difícil...
Foi exatamente o que eu disse MICOx!!! Aparece vazio pq ele não tinha definido a propriedade CSS. Se ele definir ai aparece algo do tipo "200px"!!!!!!!!Acho que você não leu direito o que eu disse!!!O que o Fleury disse dá certo pq ele está definindo o valor da propriedade "style.height" em style="height: 30px; width: 150px;"O que também confirma o que eu disse!E não tem nada a ver com onLoads e onMouseDowns ou onQualquerCoisa do JavaScript como você disse:
Isso acontece pois ao chegar e executar o script de alert que tá lá embaixo perto do body, o navegador ainda não terminou de carregar completamente a página (onload). Já na hora que ocorre o onmousedown, o navegador já carregou tudo belezinha.
;)Bem... té mais pra vcs!
Iii o cara tá nervoso. hehehe :) Calmae rapá, aqui é todo mundo aprendiz e amigo. :)
Aparece vazio pq ele não tinha definido a propriedade CSS... Acho que você não leu direito o que eu disse!!!
Ele havia sim definido um style css, porém não foi inline. você só esqueceu de colocar a palavra "inline" ao se referir ao css no seu primeiro post. Por isto, houve a confusão da minha parte. Um código não deixa de ser css só porque está dentro do <style> :)
E não tem nada a ver com onLoads e onMouseDowns ou onQualquerCoisa do JavaScript como você disse:
Calma cara, você leu meu PS do meu post anterior?
>
PS:
Ah... o script dele está após a declaração dos DIVs... portanto eles já foram criados e já possuem todas as propriedades!
Realmente, você tá certo.
:)
E ai. Tudo bão?!Olha... todas as propriedades de ".style." são referentes à propriedades de estilo CSS! Quando você dá um "alert" em "style.height" e aparece vazio é porquê você não definiu essa propriedade no CSS... se você tivesse definido apareceria algo do tipo "200px"! :) Essa propriedade não possui um valor padrão, por isso aparece vazio! Eu acho que a DIV especificamente não tem o atributo "height" do html!Bem... espero ter ajudado. Abraço.