上下文: 我有一个使用 HTML5 data- attributes 的 HTML 页面.我的一些 CSS 样式使用 attribute selectors根据这些自定义属性的值设置元素样式。
问题:当我使用 JavaScript 更新 data- 属性的值时，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 重新评估元素的样式，而不用弄乱元素的属性？
最佳答案
虽然许多属性在更改时会导致重排，但 Internet Explorer 8 中的 data-* 属性似乎不会出现这种情况。更改这些属性不会立即导致重绘元素- 您将必须手动触发回流。
el.setAttribute("data-foo", "foo");
el.style.opacity = 1;
在上面的示例中，我通过将元素的不透明度设置为 1 来触发重排。您还可以将缩放属性设置为 1，甚至将元素的类名设置为其自身:
el.className = el.className;
任何这些都应该立即应用基于属性选择器的新样式。好消息是，这是在 IE8 中出现的，这是一种在广泛使用数据属性之前的浏览器，所以虽然我们不得不在那里遭受一些痛苦，但我们不必使用 IE9 或 IE10 - 这两个版本都可以在没有任何特别注意回流焊问题。
关于javascript - 属性值更改后 IE8 不刷新类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14222123/