Menu
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?
810
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.
89
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
