Question

我正在尝试更改<span>代码的文字颜色。

<script type="text/jscript">
window.setInterval(function(){
    if ($("#sw").css("color") == "red") {
    $("#sw").css("color","blue");
    }
    else if($("#sw").css("color") == "blue") {
    $("#sw").css("color","green");
    }
    else if($("#sw").css("color") == "green") {
    $("#sw").css("color","red");
    }
    }, 1000);


 </script>

以上示例应更改<span>标记内的文字颜色。

我已在Internet Explorer中对其进行了测试，但效果很好，但在 Google Chrome 或 Mozilla Firefox 中无效。

有什么问题？这些浏览器不支持这个吗？有没有解决方法？这个问题的解决方案是什么？

Answer 1

检查这个小提琴Link

 setInterval(function(){
  if($("#sw").css("color") == "rgb(0, 0, 255)"){
   $("#sw").css("color","Red");
  }
  else if($("#sw").css("color") == "rgb(255, 0, 0)")
  {
    $("#sw").css("color","green");
  }
  else{
   $("#sw").css("color","Blue");
  }
 },1000);

Answer 2

您获取的是RGB值而不是颜色名称

当我使用var look = $（'＃sw'）。css（'color'）;结果是chrome调试器中的“rgb（255,0,0）”

您的代码无效，因为返回的字符串是颜色的rgb值，而不是颜色本身，用RGB值替换名称会修复您的代码。

 <script type="text/jscript">
                        window.setInterval(function () {
                    if ($('#sw').css('color') === 'rgb(255, 0, 0)') {
                        $("#sw").css("color", "rgb(0, 0, 255)");
                        }
                    else if ($("#sw").css("color") === "rgb(0, 0, 255)") {
                        $("#sw").css("color", "rgb(0, 128, 0)");
                        }
                    else if ($("#sw").css("color") === "rgb(0, 128, 0)") {
                         $("#sw").css("color", "rgb(255, 0, 0)");
                        }
                    }, 1000);
 </script>

如第二个相关问题所述，这不会影响IE。因为IE使用十六进制值。我建议使用另一个其他声明来解释这个问题。

之类的东西

else if ($("#sw").css("color") === "#FF0000") {
                        $("#sw").css("color", "#00FF00");
                        }

或者使用基本陈述中的条件或条件，如

 if ($('#sw').css('color') === 'rgb(255, 0, 0)')||($("#sw").css("color") === "#FF0000") {
                    $("#sw").css("color", "rgb(0, 0, 255)");
                    }

我想它可以在Firefox中运行，因为firefox将存储css颜色属性，但是你指定它，但是chrome会将css规范化为RGB值，尽管我可能错了

此外，您可以通过使用straigt javascript使其更高效。类似于：How to get the background color of an element using javascript?

更改文本颜色不适用于不同的浏览器

2 个答案: