5

上下文：我有一个使用HTML5 数据属性的 HTML 页面。我的一些 CSS 样式使用属性选择器来根据这些自定义属性的值设置元素的样式。

问题：当我使用 JavaScript 更新 data- 属性的值时，Chrome 会通过重新设置受影响元素的样式来正确响应，但 IE8（我需要支持）不会...不会立即响应。class让 IE8 更新样式的唯一方法是通过其他方式（例如删除或修改属性）直接摆弄 CSS 样式。

例子：

<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 重新评估元素的样式，而不用乱搞元素的属性？

4

2 回答 2

18

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

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

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

el.className = el.className;

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

于 2013-01-08T19:32:36.877 回答
0

如果你有 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。

演示

于 2013-01-08T20:20:27.673 回答