Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Felipe_ls

JS não acha valor definido de height pelo css

Por , em Javascript

Recommended Posts

Felipe_ls    0

Felipe_ls
Postado

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!

Compartilhar este post

Link para o post
Compartilhar em outros sites

dmarcosm    0

dmarcosm
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

dmarcosm    0

dmarcosm
Postado

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)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fleury    3

Fleury
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

dmarcosm    0

dmarcosm
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

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.
:)

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito