Question

I have a page where the background colour can be set dynamically. In some instances I have child divs I would like to use background-color:inherit to keep them the same colour as the body.

What I find is that when the body background colour is changed, the inherited colours aren’t consistently cascaded. It appears to be ok in Firefox but not in Chrome or IE.

In firefox it consistently changes both elements. In chrome and IE the results seem varied, but if you click on the colour the background already is (e.g. everything is blue, click on the “blue” button) and then another colour, it seems to consistently break.

(I do realise the inherited colour isn’t needed in this example, however I’m just trying to demo the issue in as little code as possible.)

http://jsfiddle.net/48HBe/2/

If this were one browser only then I would suspect this was a possible browser issue, but as it seems to affect Chrome and IE I’m wondering if I’m expecting something unreasonable from the browser’s rendering and whether I should be using an alternative approach?

Answer 1

Your code seems to work fine in Chrome, anyway if the problem is related to IE, I would try a different approach. Instead of changing a single css property, just try to change the class name of body element, like in this example fiddle: http://jsfiddle.net/48HBe/3/

the css thus becomes

body, body.blue { background-color:blue; }
body.green { background-color:green; }
body.red { background-color:red; }

and the js code is simply

...
var b = document.body;
$("#RedButton").click(function()   { b.className = 'red';   });                  
$("#GreenButton").click(function() { b.className = 'green'; });                  
$("#BlueButton").click(function()  { b.className = 'blue';  });

doing so you have a better separation between logic and presentation and you could change more style properties inside the css (and not inside js code)