动态背景颜色和子元素颜色继承

我有一个页面，可以动态设置背景颜色。在某些情况下，我有孩子div我想使用background-color：inherit来保持它们与身体颜色相同。动态背景颜色和子元素颜色继承

，我觉得那是什么时，身体的背景颜色改变时，继承的颜色不一致级联。在Firefox中似乎没有问题，但在Chrome或IE中没有问题。

在Firefox中，它始终更改这两个元素。在Chrome和IE中，结果看起来不一样，但如果你点击背景颜色（例如，一切都是蓝色的，点击“蓝色”按钮），然后是另一种颜色，它似乎一直破裂。

（我不知道是不是需要在这个例子中继承颜色，但我只是想演示这个问题在短短的代码越好。）

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

如果这是一个浏览器只有那么我会怀疑这是一个可能的浏览器问题，但因为它似乎影响Chrome浏览器和IE浏览器，我想知道如果我期望从浏览器的渲染不合理，我是否应该使用一种替代方法？

来源

2012-06-27 Timbo

在Chrome 20.0.1132.43似乎它的正常工作 – fcalderan

火狐以及... – Th0rndike

IE8有一些问题 – Dipak

您的代码似乎很好地工作在Chrome，无论如何，如果问题涉及到IE浏览器，我会尝试不同的方法。相反，改变单一的CSS属性的，只是尽量在这个例子中拨弄改变body元素的类名，如：http://jsfiddle.net/48HBe/3/

的CSS从而成为

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

和JS代码只是

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

这样做，你有逻辑和表现较好的分离，你可以更改CSS里面更多的样式属性（而不是里面的js代码）

来源

2012-06-27 10:43:38 fcalderan

+1喜欢它......！ – Dipak

谢谢 - 这是一个很好的解决方法，证明了这个问题（当然，在我遇到的两个浏览器中似乎都能正常工作）。在生产代码中，我实际上是从颜色选择器控件中选择颜色，所以我没有指定类名称的选项。但是，您的解决方案的工作原理令人鼓舞，因为级联颜色没有根本问题。我可能会看到我是否可以找到类似的替代方法... – Timbo

P.S. +1无论如何为解决问题所呈现的... – Timbo

我删除background-color:inherit;它做了这项工作。

来源

2012-06-27 10:44:53 lvil

根据我在该问题中的链接的免责声明，该示例过于简化以展示我的问题，通常会有其他元素意味着必须设置背景颜色。 – Timbo

动态背景颜色和子元素颜色继承

回答

相关问题