IE8 not refreshing class after attribute value change

Question

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 o

Answer 1

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.

Answer 2

don't use onclick if you have the possibilites of jQuery write it like this

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

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

in IE you always must check the javascript-error-console.

DEMO