CODEWITHSUNDEEP
jquerygoogle-chromefirefoxbrowser
Mahesh Wagh
Mahesh Wagh

Reputation: 161

Change Text Color Not Working In Different Browsers

I am trying to change the text color of a <span> tag.

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

The above example should change the text color within the <span> tag.

I have tested it in Internet Explorer and it works fine, but it doesn't work in Google Chrome or Mozilla Firefox.

What is the problem? Do these browsers not support this? Are there any workarounds? What is the solution for this issue?

Upvotes: 0

Views: 1106

Answers (2)

Alexander Troup
Alexander Troup

Reputation: 187

You're getting the RGB value rather than the color name

when i used var look = $('#sw').css('color'); the result was "rgb(255, 0, 0)" in the chrome debugger

Your code isn't working because the string returned is the rgb value of colour, rather than the color itself, replacing the names with RGB values fixeds your code.

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

As noted in the second related question, this won't worrk on IE. because IE uses hex values. I suggest using another else statement to account for that. something like 

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

either that or using an or condition on your basic statements like

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

I imagine that it works in Firefox because firefox will store the css color property however you specify it, however chrome will normalise the css into an RGB value, though i may be wrong

Also, you may be able to make it more efficient by using straigt javascript. something like: How to get the background color of an element using javascript?

Related Questions:

Jquery if then statement for css value

How to get hex color value rather than RGB value?

Upvotes: 0

Kathiravan
Kathiravan

Reputation: 699

check this fiddle 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);

Upvotes: 0

Related Questions