CODE
<style type="text/css">
div#caixa{ width:50px; height:50px; border:1px solid blue; display:none }
</style>
<div id="caixa"></div>
<script type="text/javascript">
if(document.getElementById('caixa').style.display=="none")
document.getElementById('caixa').style.display="block"
</script>
div#caixa{ width:50px; height:50px; border:1px solid blue; display:none }
</style>
<div id="caixa"></div>
<script type="text/javascript">
if(document.getElementById('caixa').style.display=="none")
document.getElementById('caixa').style.display="block"
</script>
O código é simples, ele verifica se o div "caixa" está oculto, se estiver ele faz aparecer.
Se tentaram fazer isso com certeza não tiveram êxito. Isso porque o javascript só consegue verificar os valores de style que são definidos pelo java script:
CODE
document.getElementById('caixa').style.display="none"
ou quando colocados em modo in-line:
CODE
<div id="caixa" style="display:none"></div>
Então como fazer pra pegar o valor do estilo do elemento?
Bom, (de novo vou falar bem do péssimo IE) no iE é simples, ele tem uma propriedade chamada currentStyle, simples, basta utilizá-lo no lugar de style.
Porém, no FF é o seguinte código:
CODE
document.defaultView.getComputedStyle(document.getElementById('caixa'), null).getPropertyValue("height")
Olha só o trilho de rato...Podem falar o que quiser do iE, mas sem dúvida seus códigos são mais elegantes.
Enfim, vamos fazer um Cross-Browser desse código pra não ficarmos repetindo toda hora essa coisa toda, utizando a dica que eu passei sobre propriedades no outro post.
CODE
function $style(elem, att){
if(elem.currentStyle)
return (elem.currentStyle[att])
return document.defaultView.getComputedStyle(elem, null).getPropertyValue(att)
}
if(elem.currentStyle)
return (elem.currentStyle[att])
return document.defaultView.getComputedStyle(elem, null).getPropertyValue(att)
}
Tadáaaa \o/, usando a dica da propriedade como um array podemos, com pouco código, retornar o valor do atributo passado como argumento. Portanto, aquele primeiro código ficaria assim:
CODE
var caixa=document.getElementById('caixa')
if($style(caixa, "display")=="none")
caixa.style.display="block"
if($style(caixa, "display")=="none")
caixa.style.display="block"
Ó que código bonito....Esse é um bom exemplo de utilização de propriedades como array que eu disse no post passado.
Eu não testei em outros browsers, então eu gostaria de uma ajuda dos usuários do fórum pra saber se o código tem bug e se funciona em outros navegadores.
Akeleabrasssss