Question

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<p id="demo">
JavaScript can change the style of an HTML element.
</p>

<script>
function myFunction()
{ 
  x=document.getElementById("demo") 
  if (x.style.color="#000000")
  {
    x.style.color="#FF0000"; 
    //alert(x.style.color);
  }
  else
  {
    x.style.color="#000000"; 
    //alert(x.style.color);
  }
}
</script>

<button type="button" onclick="myFunction()">Click Me!</button>

</body>
</html>

以上代码无法正常工作点击

我试过很多不同的颜色

x.style.color不接受else块

其他阻止无法正常工作

请帮助

Answer 1

当我在chrome中测试时，color是rgb（255,0,0），这就是if条件总是为false的原因。你在if和not comparison中的分配（= vs ==）看看：Javascript - Converting colors (numbers -> strings) vice versa

Answer 2

A）在==条件声明中使用=代替if B）检查 rgb 颜色表示法而非十六进制

function myFunction() {

    x = document.getElementById("demo");
    if (x.style.color == "rgb(0, 0, 0)") {
        x.style.color = "#FF0000";
    } else {

        x.style.color = "#000000";
    }
}

http://jsfiddle.net/4QUWq/1/

Answer 3

不同的浏览器可能会为相同的颜色返回不同的值。您最好使用不同的逻辑来切换颜色。我建议使用纯JavaScript，这是：

var demoColors = ["#000000", "#FF0000"];
var demoFlag = true;
function myFunction()
{ 
    var demo = document.getElementById("demo");
    demo.style.color = demoColors[+demoFlag]
    demoFlag = !demoFlag;
}

Live test case

Answer 4

执行比较时，例如在条件使用中==而不是=。 =是赋值运算符。更改比较运算符后，您必须使用rgb而不是颜色代码。

function myFunction()
{ 
  x=document.getElementById("demo");
  if (x.style.color=="rgb(0, 0, 0)")
  {
    x.style.color="#FF0000"; 
    //alert(x.style.color);
  }
  else
  {
    x.style.color="#000000"; 
  }
}

Answer 5

使用style.backgroundColor。

它返回颜色的名称或RGB格式，因此您必须将其转换。

Answer 6

使用rgb颜色表示法而不是十六进制

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

 <p id="demo">
 JavaScript can change the style of an HTML element.
 </p>

 <script>
 function myFunction() {

 x = document.getElementById("demo");
 if (x.style.color == "rgb(0, 0, 0)") {
    x.style.color = "#FF0000";
   } 
  else {

    x.style.color = "#000000";
 }
}
</script>

<button type="button" onclick="myFunction()">Click Me!</button>

</body>
</html>

javascript颜色变化不起作用

6 个答案: