none
Javascript CSS - style ou currentstyle? RRS feed

  • Pergunta

  • 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;

    quarta-feira, 30 de abril de 2014 20:13