5

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?

2
  • How is modifying 1 attribute ugly, but modifying a different attribute elegant?
    – cimmanon
    Jan 8, 2013 at 19:10
  • 1
    @cimmanon - a different attribute? Which attribute modification have I suggested is elegant?
    – JDB
    Jan 8, 2013 at 19:13

2 Answers 2

18

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.

7
  • 1
    That's better than briefly affecting the style of the element (which can cause flickering). I'll give you +1 for that.
    – JDB
    Jan 8, 2013 at 19:34
  • Thanks for the more thorough (thorougher?) analysis. Unfortunately, in more complex scenarios, setting the opacity (or className) is unreliable. In my tests so far it works most of the time after a half-second delay, but not all the time. Toggling the class still seems to be the most effective method. :( ... And I really liked this solution too!
    – JDB
    Jan 8, 2013 at 20:20
  • @Cyborgx37 What issues are you having setting the className to itself, or zoom to 1?
    – Sampson
    Jan 8, 2013 at 20:29
  • 3
    I take my previous comments back... setting the className works beautifully - zoom, opacity, etc, are sketchy at best. Handily, there is a jQuery plugin to do this as well. (The absolutely positioned element I referred to earlier was actually the container... got confused.)
    – JDB
    Jan 8, 2013 at 21:12
  • 1
    January 2018 update: this problem is occurring in IE for Windows 10 (I've styled using multiple data attributes if it makes a difference). Thanks for both the answer and question.
    – traktor
    Jan 18, 2019 at 2:02
0

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

4
  • Yes, I am familiar with Douglas Crockford's style guide. The example is not production code and onclick was easier to read.
    – JDB
    Jan 8, 2013 at 20:23
  • Yeah, but have you tried this in IE8? Does it work? It's logically the same code like yours. I have no IE to try.
    – algorhythm
    Jan 8, 2013 at 20:26
  • 2
    I don't understand how this addresses the question.
    – JDB
    Jan 8, 2013 at 20:28
  • @algorhythm You can always test IE in the browser using browserstack.com - I use it. Terrific service.
    – Sampson
    Jan 8, 2013 at 21:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.