Thay đổi Javascript Kiểu Div

Question

Tôi muốn rằng part 1 thay đổi kiểu div onclick và part 2 một lần nữa khi nhấp vào nó sẽ trở lại bình thường. Tôi đã thử làm như vậy nhưng tôi đã không đạt được kết quả part 2.

Tiếp theo là các mã Javascript

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

Sau khi nhấp vào div kiểm tra một lần nữa, màu sắc nên trở về với defaulr màu tức là màu đen ...

Answer 1

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"; 
} 

Answer 2

bạn có thể kiểm tra màu sắc trước khi bạn nhấp để thay đổi nó.

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

Answer 3

Có một số logic để kiểm tra màu sắc hoặc có một số lá cờ,

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

    } 
} 

Answer 4

Một câu lệnh switch đơn giản nên làm các trick:

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

Answer 5

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

Answer 6

Better thay đổi lớp phần tử (.regular là màu đen, .alert là màu đỏ):

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

Answer 7

Sử dụng jQuery:

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

Live example