jquery - 動的な背景色と子要素の色の継承

Question

背景色を動的に設定できるページがあります。場合によっては、background-color:inherit を使用してボディと同じ色に保ちたい子 div があります。

私が見つけたのは、ボディの背景色が変更されたときに、継承された色が一貫してカスケードされていないことです。Firefox では問題ないように見えますが、Chrome や IE では問題ありません。

Firefox では、一貫して両方の要素が変更されます。chrome と IE では結果が異なるように見えますが、背景の色をクリックすると (たとえば、すべてが青色の場合は「青色」ボタンをクリックします)、別の色をクリックすると、一貫して壊れているように見えます。

(この例では継承された色が必要ないことはわかっていますが、できるだけ少ないコードで問題をデモしようとしています。)

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

これが 1 つのブラウザーのみである場合、これはブラウザーの問題である可能性があると思われますが、Chrome と IE に影響を与えるように思われるため、ブラウザーのレンダリングから何か不合理なことを期待しているのか、別のアプローチを使用する必要があるのか​​ どうか疑問に思っています?

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)

Answer 2

私は削除background-color:inherit;し、それは仕事をしました。