Javascript IE8属性值更改后不刷新类

上下文：我有一个HTML页面，可以使用。我的一些CSS样式用于根据这些自定义属性的值设置元素的样式

问题：当我使用JavaScript更新一个数据属性的值时，Chrome会通过重新列出受影响的元素来正确响应，但IE8（我需要支持）不会。。。不是马上。让IE8更新样式的唯一方法是以其他方式直接修改CSS样式（例如删除或修改

class

属性）

示例：

.Test[data foo=“bar”]{背景色：绿色；}
.Test[data foo=“baz”]{背景色：红色；}
函数更改（div）{$（div）.attr（“数据foo”，“baz”）；}
函数toggleTest（）{$（“DIV”）.toggleClass（“Test”）；}
测试
测试

在Chrome中，您可以单击Test1和Test2栏，它们会立即变为红色。在IE8中，您必须单击工具栏，然后单击按钮两次（一次删除类，另一次恢复类）

---

问题：解决方法是什么？显然，我已经确定了一个（添加/删除类），但它很难看。有没有一种优雅、不引人注目的方法可以迫使IE8重新评估一个元素的样式，而不影响元素的属性？

虽然许多属性在更改时会导致回流，但Internet Explorer 8中的

数据-*

属性似乎并非如此。更改这些不会立即导致重新绘制元素-您必须手动触发回流

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

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

el.className = el.className;

---

其中任何一个都应基于属性选择器立即应用新样式。好消息是，这是在广泛使用数据属性之前的浏览器IE8中出现的，因此，虽然我们在这方面会遇到一些困难，但我们不必使用IE9或IE10——这两个版本都可以正常工作，而不需要特别注意回流问题。

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

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

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

在IE中，您必须始终检查javascript错误控制台

---

如何修改一个属性丑陋，而修改另一个属性优雅？@cimmanon-另一个属性？我建议哪种属性修改是优雅的？这比简单地影响元素的样式（这会导致闪烁）要好。我会给你+1。谢谢你更彻底的分析。不幸的是，在更复杂的场景中，设置不透明度（或类名）是不可靠的。到目前为止，在我的测试中，它在半秒延迟后大部分时间都能工作，但不是所有时间都能工作。切换课堂似乎仍然是最有效的方法（…我也非常喜欢这个解决方案！@Cyborgx37将

类名

设置为自身或

缩放

设置为1有什么问题？我收回我以前的评论…设置

类名

效果很好-缩放、不透明度等最简单。方便的是，还有一个方法可以做到这一点。（我之前提到的绝对定位元素实际上是容器…被弄糊涂了。）2018年1月更新：这个问题发生在IE for Windows 10中（如果有区别的话，我已经使用多个数据属性设置样式）。谢谢你的回答和问题。是的，我很熟悉。这个例子不是生产代码，onclick更容易阅读。是的，但是你在IE8中试过这个吗？它能工作吗？它在逻辑上和你的代码一样。我没有IE可以试。我不明白这是如何解决这个问题的。@你可以在浏览器中测试IE使用-我使用它。很棒的服务。