Question

上下文：我有一个使用HTML5 data- attributes的HTML页面。我的一些CSS样式使用attribute selectors根据这些自定义属性的值设置元素样式。

问题：当我使用JavaScript更新数据属性的值时，Chrome会通过重新设置受影响的元素来正确响应，但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

虽然许多属性在更改时会导致重排，但Internet Explorer 8中的data-*属性似乎不是这种情况。更改这些属性不会立即导致重新绘制元素 - 您将不得不手动触发重排。

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

在上面的示例中，我通过将元素的不透明度设置为1来触发重排。您还可以将zoom属性设置为1，或者甚至将元素的className设置为自身：

el.className = el.className;

其中任何一个都应该立即应用基于属性选择器的新样式。好消息是，这是在IE8中，这是一个广泛使用数据属性之前的浏览器，所以虽然我们不得不在那里受苦，但我们不必使用IE9或IE10 - 这两个版本都可以正常使用任何特别关注回流问题。

Answer 2

如果你有jQuery的可能性，请不要使用onclick 像这样写

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

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

在IE中

你总是必须检查javascript-error-console。

DEMO

IE8在属性值更改后没有刷新类

2 个答案: