如何在向dom元素添加類後強制重新繪製ie8

在ie8中，如果在更改類名時元素不與相關聯的css重新繪製，那麼如何強制瀏覽器刷新並且不會終止ie8性能？如何在向dom元素添加類後強制重新繪製ie8

此帖子（How can I force WebKit to redraw/repaint to propagate style changes?）建議調用offsetHeight，強制重畫。

這篇文章（http://www.tek-tips.com/viewthread.cfm?qid=1688809）有一條評論，建議在body元素中添加和刪除一個類。

這兩種方法都會導致ie8性能下降，而且第一種方法會對我的佈局產生副作用。

什麼是最好的方法？

2012-12-09 Doug

我爲我的ie8問題提出的解決方案是添加/刪除我正在改變的元素的父級附近的類。由於我使用的是modernizer，我檢查ie8，然後添加/刪除舞蹈以獲得新的CSS。

 $uicontext.addClass('new-ui-look'); 
     if ($('html').is('.ie8')) { 
      // IE8: ui does not repaint when css class changes 
      $uicontext.parents('li').addClass('z').removeClass('z'); 
     }

來源

2012-12-09 01:37:20 Doug

我注意到IE8似乎根據元素數量和DOM中附加事件的數量而減慢。而且，發現屬性選擇器在事件處理程序中更快，例如， ''some-attr]'比'.some-class'好。 – Doug

謝謝男人!!!! 這個把戲讓我的一天！ – luchopintado

我會說'$（el）.parent（）。addClass（'forceiepaint'）。removeClass（'forceiepaint'）' – abernier

在其上觸發移動或調整事件大小。

var ie8 = whateverYouUseToDetectIE(); 
var element = document.getElementById("my-element"); 
element.className += " new-class"; 
if (ie8) { 
    element.fireEvent("resize"); 
}

來源

2012-12-09 02:17:38 webaware

我剛剛嘗試過，行爲不如近親父母的添加/刪除類雄辯。並非所有事件都得到重繪。無論我調用它的速度多快，add/remove類都會重新繪製所有事件。在我的例子中，mouseenter/leave事件。 – Doug

該問題的正確答案是您需要實際更改content規則。

.black-element:before { content:"Hey!"; color: #000;} 
.red-element:before { content:"Hey! "; color: #f00;}

通知我Hey!後添加上.red-element

來源

2014-01-16 19:44:19 Adam

這額外的空間擴展了這裏其他的答案。您需要同時添加一個新班級（Doug的回答）並確保班級具有不同的內容值（Adam的回答）。僅僅改變班級可能還不夠。內容更改需要強制IE8重新繪製。這是一個related blog post。

這裏是jQuery來更改添加新類：

$(".my-css-class").addClass("my-css-class2");

這裏是具有略微不同含量值第二類CSS：

.my-css-class:before {content: "\e014";} 
.my-css-class2:before {content: "\e014 ";}

來源

2014-08-08 13:35:41

可笑的是，這個工程：

function ie8Repaint(element) { 
    element.html(element.html().replace('>', '>')); 
}

DOM中沒有任何實際的變化，所以它不會影響任何其他瀏覽器。

來源

2015-01-29 12:37:33 user489998

我有很多的困難，並想盡一切都無濟於事......直到我想這對於IE8

function toggleCheck(name) { 
    el = document.getElementById(name); 
    if(hasClass(el, 'checked')) { 
    el.className = el.className.replace(/checked/,'unchecked'); 
    } else if(hasClass(el, 'unchecked')) { 
    el.className = el.className.replace(/unchecked/,'checked'); 
    } 
    document.body.className = document.body.className; 
} 
function hasClass(element, cls) { 
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1; 
}

現在我爲我的複選框CSS改變做工精美的IE8，Chrome瀏覽器和Firefox！

來源

2015-06-12 01:48:52 Urchin

如何在向dom元素添加類後強制重新繪製ie8

回答

相關問題