{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 狗以群分 的问题《IE8 not refreshing class after attribute value cha》','https://www.manongdao.com/q-328822.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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?
don't use onclick if you have the possibilites of jQuery write it like this
in IE you always must check the javascript-error-console.
DEMO
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.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:
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.