Javascript 更改 Div 样式

Javascript change Div style

本文关键字：样式 Div 更改 Javascript      更新时间：2023-09-26

我希望part 1点击div 样式更改，并在单击时再次part 2它恢复正常。我尝试这样做，但我未能达到part 2的结果。

以下是Javascript代码

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

再次单击测试div 后，颜色应该恢复为实际颜色，即黑色...

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

使用 jQuery： 

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

现场示例

有一些逻辑来检查颜色或有一些标志，

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

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

一个简单的switch语句应该可以解决问题：

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

最好更改元素的类（.regular 为黑色，.alert 为红色）：

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

单击更改之前检查颜色。

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