尝试在javascript中单击更改文本的颜色

时间:2013-10-13 22:29:37

标签: javascript html colors

因此,每当我点击它改变颜色的文本时,我都会尝试制作一些东西。

使用Javascript:

function changecolor(){
    var tc = document.getElementById("header").style.color.value;
    if  (tc = "#000000") { tc = "#0009FF"}
    else if (tc == "#0009FF") { tc = "#FF0000"}
    else if (tc == "#FF0000") { tc = "#15FF00"}
    else if (tc == "#15FF00") { tc = "#FFA600"}
    else {tc = "#000000"};
    document.getElementById("header").style.color.value = tc;
}

HTML:

<div onclick="changecolor()"><h1 id="header" style="color:#000000;"> Nick's Basic Physic's Calculator </h1></div>

它不起作用,我无法弄清楚原因。当我点击文本时没有任何反应。

3 个答案:

答案 0 :(得分:1)

更改

document.getElementById("header").style.color.value = tc;

document.getElementById("header").style.color = tc;

工作示例:

http://jsfiddle.net/xEyLf/

答案 1 :(得分:1)

您的问题出在var tc = document.getElementById("header").style.color.value;

您必须更改为tc = document.getElementById("header").style.color;才能将颜色变为变量。

答案 2 :(得分:0)

我有另一个解决方案......这是一个jsfiddle:http://jsfiddle.net/9zfJA/

请记住,我正在使用这些jQuery方法(以及jQuery库本身),只需在CSS类之间切换:

hasClass(): to check if the class is present

addClass(): to add the correct class based on the condition above

removeClass(): remove all classes, I've basically built a "reset" function

我认为它的功能和你想要它的方式有误,但我用你在问题中的相同逻辑构建它。