2012-04-09 21 views
19

Desidero che le modifiche allo stile part 1 onclick div e part 2 di nuovo sul clic ritorni alla normalità. Ho provato a farlo ma non sono riuscito a ottenere i risultati part 2.Javascript cambia codice Div

seguito è il codice Javascript

function abc() { 
    document.getElementById("test").style.color="red"; 
} 

Dopo aver cliccato nuovamente il div di prova, colore deve tornare a defaulr colore cioè nero ...

+1

Inserisci evento codice –

risposta

31
function abc() { 
    var color = document.getElementById("test").style.color; 
    if (color === "red") 
     document.getElementById("test").style.color="black"; 
    else 
     document.getElementById("test").style.color="red"; 
} 
+0

vincolante nel caso frase, perché non 'color = "nero"' e 'color = "red"'. hai già in mano il colore –

+1

@AbdullahGheith 'color' è solo il * nome * della variabile. Potrei chiamarlo 'bob' o qualunque cosa volessi. Ho memorizzato il colore in 'color'. –

+0

Voglio dire nella riga dopo se e dopo la riga –

0

si può controllare il colore prima di fare clic per cambiarlo.

function abc(){ 
    var color = document.getElementById("test").style.color; 
    if(color==''){ 
     //change 
    }else{ 
     //change back 
    } 
} 
1

avere un po 'di logica per controllare il colore o avere qualche bandiera,

function abc() { 
    var currentColor = document.getElementById("test").style.color; 

    if(currentColor == 'red'){ 
    document.getElementById("test").style.color="black"; 
    }else{ 
    document.getElementById("test").style.color="red"; 

    } 
} 
+0

Questo potrebbe non funzionare per tutti i browser –

0

Una semplice dichiarazione switch dovrebbe fare il trucco:

function abc() { 
    var elem=document.getElementById('test'),color; 
    switch(elem.style.color) { 
     case('red'): 
      color='black'; 
      break; 
     case('black'): 
     default: 
      color='red'; 
    } 
    elem.style.color=color; 
} 
0
function abc() { 
    var color = document.getElementById("test").style.color; 
    color = (color=="red") ? "black" : "red" ; 
    document.getElementById("test").style.color= color; 
} 
0

modificare meglio la classe di l'elemento (.regular è nero, .alert è rosso):

function abc(){ 
    var myDiv = document.getElementById("test"); 
    if (myDiv.className == 'alert') { 
    myDiv.className = 'regular'; 
    } else { 
    myDiv.className = 'alert'; 
    } 
} 
2

utilizzando jQuery:

$(document).ready(function(){ 
    $('div').click(function(){ 
     $(this).toggleClass('clicked'); 
    }); 
});​ 

Live example

+0

Buon esempio! Semplice e fantastico! :) –