動態背景顏色和子元素顏色繼承

我有一個頁面，可以動態設置背景顏色。在某些情況下，我有孩子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

動態背景顏色和子元素顏色繼承

回答

相關問題