在IE8中強制重新計算樣式 -

如何最準確地強制瀏覽器重新計算樣式，無論是在整個身體上還是在單個元素上？在IE8中強制重新計算樣式 -

我不能簡單地通過替換innerHTML或其他東西來重新加載整個DOM，因爲這會丟失所有附加的事件處理程序，所以我需要使用一些只會強制瀏覽器重新計算樣式的東西。這確實需要與IE8一起使用。

我試過尋找任何可以解決這個問題的東西，但至少有一個術語「重新計算樣式」，我沒有得到任何地方，唯一相關的結果，我可以找到「重新加載樣式」是「How to refresh the style of a page after css switch」。但是這個問題對我來說並不適用，因爲我不是直接改變需要改變樣式的元素的類，而是它的兄弟。

Here is a simplified demo，只有相關的代碼：

HTML：

<span id="foo">This gets a class,</span> 
<div>...and this should become red,</div> 
<button onclick="document.getElementById('foo').className = 'foo';">...if you click here</button>

CSS：

span.foo + div {color:red;}

如果測試演示，至少在IE8仿真模式，IE11，你會發現風格不會更新。對我而言，它只會在我在F12界面的DOM查看器中選擇節點後纔會更新。（PS：IE8仿真模式位於IE11 F12界面的底部）。

來源

2014-01-14 Joeytje50

請不要使用內嵌JavaScript。它導致可讀性差，通常是不好的做法。 –

如果您需要支持IE 8，則應該在IE 8中進行測試，而不是在模擬器中進行測試，這可能會導致實際瀏覽器中可能不存在的問題。 – Pavlo

@RJJordan就像我說的，我做了一個簡化版本。這只是一個非常快速的演示。 – Joeytje50

切換在元件的祖先類被針對性由+ selector：

$('body').addClass('ie_force_restyle').removeClass('ie_force_restyle');

這將迫使IE8-重新執行選擇器對於給定的元件的所有後代匹配。

是有點更高效，您可以指定#foo的母公司，以及：

$('#foo').parent().addClass('ie_force_restyle').removeClass('ie_force_restyle');

Demo

測試在Windows 7 64位系統 - IE8。

注：我只測試了這對相鄰的兄弟選擇+，但我敢肯定，它應該~，:first-child和其他選擇工作不反應DOM改變舊的IE瀏覽器。

_{雖然我不能聲稱獨創性，但我在IE8的:checked pseudo-class polyfill上工作時，在互聯網的黑暗角落發現了這個解決方案。}

來源

2014-01-14 19:54:42

我很抱歉花了這麼長時間纔將您的答案標記爲「已接受」，但由於某種原因，它說「您可以在1分鐘內接受答案」。儘管感謝您的幫助！ – Joeytje50

不客氣。 '=]' –

在IE8中強制重新計算樣式 -

回答

相關問題