属性值变化后，IE8不刷新类(IE8 not refreshing class after attr

背景：我有一个HTML页面，这使得使用HTML5数据-属性。我的一些CSS样式使用属性选择基于这些自定义属性值的风格元素。

问题：当我更新使用JavaScript一个数据-属性的值，通过镀铬再整受影响的元素，但IE8（这我需要支持）正确响应不......不会立即进行。获得IE8更新款式的唯一方法是通过一些其他方式的CSS样式（如删除或修改直接摆弄class属性）。

例：

<html>
<head>    
    <style type="text/css">    
        .Test[data-foo="bar"]{ background-color: Green; }    
        .Test[data-foo="baz"]{ background-color: Red; }        
    </style>

    <script src="scripts/jquery-1.8.3.js" type="text/javascript"></script>    
    <script type="text/javascript">
        function change(div) { $(div).attr("data-foo", "baz"); }
        function toggleTest() { $("DIV").toggleClass("Test"); }    
    </script>
</head>
<body>
    <div data-foo="bar" onclick="change(this);" class="Test">Testing</div>
    <div data-foo="bar" onclick="change(this);" class="Test">Testing</div>
    <input type="button" onclick="toggleTest()" value="Toggle Class" />
</body>
</html>

在Chrome中，您可以点击的Test1和Test2的酒吧和他们变成红色瞬间。在IE8中，你必须点击该栏，然后单击按钮两次（一次删除类，再恢复它）。

问：什么是解决办法？很显然，我已经确定了一个（添加/删除类），但它是丑陋的。有一种优雅的，不显眼的方式来强制IE8重新评估元素的风格，而不出渣与周围的元素的属性？

Answer 1:

虽然许多属性，改变的时候，造成这种不出现回流是与案件data-*属性在Internet Explorer 8中更改这些不会立即导致元件被重绘-你将不得不手动触发您的回流。

el.setAttribute("data-foo", "foo");
el.style.opacity = 1;

在上面的例子中，我通过元素的不透明度设置为1，触发回流您还可以缩放属性设置为1，甚至设置元素的类名本身：

el.className = el.className;

所有这些应立即应用基于属性选择的新样式。好消息是，这是在IE8中，之前广泛应用的数据属性的，因此，虽然我们遭受了一下那里，我们没有与IE9或IE10浏览器 - 这两个版本将工作不就好了任何特别注意回流的问题。

Answer 2:

不要使用onclick如果你有jQuery的的possibilites是这样写

jQuery('input[type="button"]').click(function() {
  jQuery('div').toggleClass("Test");
});

jQuery('div').click(function() {
  jQuery('div').attr("data-foo", "baz");
});

在IE中，你总是必须检查的JavaScript错误控制台。

DEMO

文章来源: IE8 not refreshing class after attribute value change