Question

我有一个页面，可以动态设置背景颜色。在某些情况下，我有孩子div我想使用背景颜色：继承，以保持他们与身体相同的颜色。

我发现当身体背景颜色发生变化时，继承的颜色不会一直级联。它在Firefox中似乎没问题，但在Chrome或IE中却没有。

在Firefox中，它一直在改变这两个元素。在chrome和IE中，结果似乎有所不同，但是如果你点击背景已经是的颜色（例如，一切都是蓝色，点击“蓝色”按钮）然后再点击另一种颜色，它似乎一直在破碎。

（我确实意识到在这个例子中不需要继承的颜色，但是我只是想用尽可能少的代码来演示这个问题。）

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

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

Answer 1

你的代码似乎在Chrome中工作正常，无论如何，如果问题与IE相关，我会尝试不同的方法。只需尝试更改body元素的类名，而不是更改单个css属性，就像在此示例中一样：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代码中）

Answer 2

我删除了background-color:inherit;并完成了工作。

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

2 个答案: