Change Text Color Not Working In Different Browsers

Question

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?

@M.N.S., means?. If you have doubt then you may check it and find out your self but in my case it is not works. — Mahesh Wagh, Jul 16 '13 at 13:08
@M.N.S. Yes, but it's a Global Site and better to use global language as anybody can understand it. — Mahesh Wagh, Jul 16 '13 at 13:25
The [jQuery Color Plugin](https://github.com/jquery/jquery-color) may solve your issue. — Corion, Jul 16 '13 at 14:37
@Corion, Thanks for your suggestion buddy but I have a doubt that's It's Installing on local server and may be works on it but what about when I upload the file on host server on Net Is it enough to works by only references there?. Please reply for my knowledge?. — Mahesh Wagh, Jul 17 '13 at 05:51
If it works locally but not on the site (regardless of browser) make sure that jQuery is being loaded properly. It shouldn't make a difference with HTML/JavaScript where the files are as long as they're being loaded. — Corion, Jul 17 '13 at 14:08

score 0 · Answer 1 · answered Jul 16 '13 at 13:18

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

score 0 · Answer 2 · edited May 23 '17 at 12:29

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?

Change Text Color Not Working In Different Browsers

2 Answers2