Olá Pessoal,
Estou tentando fazer um toggle de styles usando uma função em javascript. Pra não ficar usando termos técnicos desnecessariamente vou direto ao exemplo.
HTML
<p id="teste">Texto que não quer dizer nada!</p>
Javascript
function myToggleDeStylesUsandoJavascript() {
var teste = document.getElementById("teste”);
//Exemplo 01
teste.style.color = (teste.currentStyle.color == 'red') ? teste.style.color = 'blue' : teste.style.color = 'red';
//Exemplo 02
teste.style.color = (teste. style.color == 'red') ? teste.style.color = 'blue' : teste.style.color = 'red';
}
AO ERRO:
No exemplo 01, usando o currentStyle eu consigo mudar o color normalmente no IE, mas nos outros navegadores não.
No exemplo 02, todo os navegadores funcionam, mas tenho que executar a função duas vezes para que passe a funcionar (botei um botão na página chamando a função).
Para complementar eu descobri que no exemplo 02 ele funcionaria diretamente (sem executar duas vezes) se eu botar dentro do html o <p style=”color: red”></p>, o que não é viável para mim pois uso o CSS em outra página.
O que eu gostaria:
Saber se é mesmo um problema de compatibilidade de navegadores no exemplo 01 e é inviável;
Saber uma prática melhor para dar um toggle no CSS desse objeto usando esses métodos dos exemplos;
Saber a opinião de vocês sobre o que é melhor, esse método apresentado, um IF, ou algum outro método que eu desconheço para mudar o css do objeto;
