Context:我有一个 HTML 页面，它使用HTML5 数据-属性。我的一些 CSS 样式使用属性选择器根据这些自定义属性的值设置元素的样式。
Problem:当我使用 JavaScript 更新 data- 属性的值时，Chrome 通过重新设计受影响的元素来正确响应，但 IE8（我需要支持）不会……不会立即响应。让 IE8 更新样式的唯一方法是通过其他方式直接摆弄 CSS 样式（例如删除或修改class属性）。
Example:
<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 重新评估元素的样式，而不用破坏元素的属性？
虽然许多属性在更改时会导致回流，但情况似乎并非如此data-*Internet Explorer 8 中的属性。更改这些属性不会立即导致元素重新绘制 - 您必须手动触发重排。
el.setAttribute("data-foo", "foo");
el.style.opacity = 1;
在上面的示例中，我通过将元素的不透明度设置为 1 来触发重排。您还可以将缩放属性设置为 1，甚至将元素的 className 设置为其自身：
el.className = el.className;
其中任何一个都应该立即应用基于属性选择器的新样式。好消息是，这是在 IE8 中发生的，这是一种在广泛使用数据属性之前的浏览器，因此，虽然我们必须忍受一点痛苦，但在 IE9 或 IE10 中我们不必这样做 - 这两个版本都可以正常工作，无需对回流问题的任何特别注意。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
