In one of my applications, I had to toggle the background of a box between two colors, say blue and red.
As I like to store an information in only one place, I decided that this place would be the box itself and that I would check the current color and set the other.
As the result did not meet my expectations, I wrote a little test page, including the following javascript code:

var  red = 'rgb(255,1,2)';
var blue = 'rgb(1,2,255)';

document.getElementById(id).style.backgroundColor = blue;

if (document.getElementById(id).style.backgroundColor == blue)
  document.getElementById(id).style.backgroundColor = red;
else
  document.getElementById(id).style.backgroundColor = blue;

and lo and behold: the box was blue with Firefox and red with IE!

I sent my test page to Mozilla and they answered this problem was already on their buglist.
This was two years ago. I recently checked again : it has become a feature ! Not only is it still in Firefox 27.0.1, but it has appeared in IE 11.0.3 !
If you want to see by yourself, here is the full test page :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Blue or red</title>
  <style>
    #smartbox {
      width: 150px;
      font: bold 16pt verdana;
      text-align: center;
      padding: 30px 0px;
      color: white;
    }
  </style>
  <script type="text/javascript">

  function showbox()
  {
    var id = 'smartbox';
    var  red = 'rgb(255,0,0)';
    var blue = 'rgb(0,0,255)';

    document.getElementById(id).style.backgroundColor = blue;
//    blue = document.getElementById(id).style.backgroundColor;

    if (document.getElementById(id).style.backgroundColor == blue)
      document.getElementById(id).style.backgroundColor = red;
    else
      document.getElementById(id).style.backgroundColor = blue;
   }
  </script>

</head>

<body onload="showbox();">
Blue or red ?<br>
<br>
This box should be <b style="color: red">RED</b>, why not ?<br>
<br>
<div id="smartbox">SMART BOX</div>
</body>
</html>

But why doesn't it work as expected ?
After some time of fruitless investigation, I suspected that in this case getElementById did not return what it was fed, and, indeed, unexpected formatting occurs: spaces appear after the commas in the rgb list.
I thought that this 'feature' could well change unexpectedly again in the future, disrupting any code using it. So, was I to give up my "brilliant" first idea and add an independent flag ? No! I found a nice workaround : instead of using my color as written, let the browser make an initial conversion to its own syntax.
Please uncomment the line:

// blue = document.getElementById(id).style.backgroundColor;

and try again !

Sure, but I'm afraid I'm no regular expression guru; when I need one, I tend to borrow some that I'm told does what I want. Also, what if this kind of 'reformatting' would be applied to color names ? Preposterous ?
Some time ago, I had a problem with IE, which recognized 'gray' as a valid color name, but not 'grey', whereas Firefox accepted both.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.