Javascript更改Div风格

我想要part 1 onclick div风格变化和part 2再次点击它恢复正常。我试图这样做，但我未能实现part 2结果。Javascript更改Div风格

以下是Javascript代码

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

再次单击测试DIV后，颜色应回过头来defaulr颜色即黑色...

来源

2012-04-09 Sandbox E

安置自己的事件在你的if语句绑定代码 – 2012-04-09 09:29:39

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

来源

2012-04-09 09:28:56

，为什么不'颜色= “黑”'和'颜色= “红色”'。你已经拿着颜色 – 2013-03-04 01:25:03

@AbdullahGheith'color'就是变量的*名称*。我可以将它命名为“bob”或任何我想要的东西。我把颜色存储在'color'中。 – 2013-03-04 10:10:47

我的意思是在if和line之后的其他行 – 2013-03-10 08:59:14

您可以检查颜色点击之前改变它。

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

来源

2012-04-09 09:30:49 lioncin

有一些逻辑检查的颜色还是有一定的标志，

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

    } 
}

来源

2012-04-09 09:30:49

这可能不适用于所有浏览器 – 2012-04-09 09:32:09

一个简单的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; 
}

来源

2012-04-09 09:33:28 faino

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

来源

2012-04-09 09:35:04 apnerve

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

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

来源

2012-04-09 09:35:35 Vlad

使用jQuery：

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

Live example

来源

2012-04-09 09:35:49 jacktheripper

很好的例子！简单而酷！ :) – 2014-09-10 15:29:19

Javascript更改Div风格

回答

相关问题