IE8在属性值更改后不刷新类 [英] IE8 not refreshing class after attribute value change
问题描述
问题：当我使用JavaScript更新数据属性的值时，Chrome会通过重新设置受影响的元素但IE8（我需要支持）不......不是立即。让IE8更新风格的唯一方法是通过其他方式直接摆弄CSS样式（例如删除或修改 class 属性）。
$ b $ 示例： $ b
< 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.jstype =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 =baronclick =change（this）;类= 测试 >测试和LT; / DIV>
< div data-foo =baronclick =change（this）;类= 测试 >测试和LT; / DIV>
< input type =buttononclick =toggleTest（）value =Toggle Class/>
< / body>
< / html>
在Chrome中，您可以单击Test1和Test2栏，它们会立即变为红色。在IE8中，你必须点击栏，然后点击按钮两次（一次删除类，再次恢复它）。
问题：强>什么是解决方法？显然我已经确定了一个（添加/删除类），但它很丑。有一种优雅的，不显眼的方式来强制IE8重新评估元素的风格，而不与元素的属性左右摆弄？
虽然很多属性在更改时会导致重排，但在Internet Explorer 8中不会出现 data - * 属性的情况。更改这些属性不会立即导致元素存在。重绘 - 你将不得不手动触发回流焊
el.setAttribute（ 数据foo 的， foo 的）;
el.style.opacity = 1;
在上面的示例中，我通过将元素的不透明度设置为1来触发重排。您还可以设置zoom属性为1，甚至可以将元素的className设置为自身：
el.className = el.className;
其中的任何一个都应立即应用基于属性选择器的新样式。好消息是，IE8是一种浏览器，它广泛使用数据属性，所以虽然我们不得不忍受一点点IE9或IE10--这两个版本都可以正常工作特别注意回流问题。
Context: I have an HTML page which makes use of HTML5 data- attributes. Some of my CSS styles use attribute selectors to style elements based on the value of those custom attributes.
Problem: When I update the value of a data- attribute using JavaScript, Chrome responds correctly by restyling the affected elements but IE8 (which I am required to support) does not... not immediately. The only way to get IE8 to update the style is by directly fiddling with the CSS style in some other way (such as removing or modifying the class attribute).
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>
In Chrome, you can click on the Test1 and Test2 bars and they change to red instantly. In IE8, you have to click the bar, then click the button twice (once to remove the class, again to restore it).
Question: What's the workaround? Obviously I've identified one (adding/removing the class), but it's ugly. Is there an elegant, unobtrusive way to force IE8 to reevaluate an element's style without mucking around with the element's attributes?
While many attributes, when changed, cause a reflow this doesn't appear to be the case with data-* attributes in Internet Explorer 8. Changing these will not immediately result in the element being redrawn - you will have to trigger your reflow manually.
el.setAttribute("data-foo", "foo");
el.style.opacity = 1;
In the above example I triggered the reflow by setting the element's opacity to 1. You could also set the zoom property to 1, or even set the element's className to itself:
el.className = el.className;
Any of these should immediately apply the new styles based on the attribute selector. The good news is that this was in IE8, a browser that preceded broad use of data attributes, so while we have to suffer a bit there, we don't have to with IE9 or IE10 - both of those versions will work just fine without any special attention to reflow issues.
这篇关于IE8在属性值更改后不刷新类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
