

`[data-value="1"]`のような要素の属性値によるセレクターでスタイルを指定しているのですが、IE8 (IE Tester使用)
で見た時に初期状態は正しく表示されるのですが、JavaScriptからDOMの属性値を変更した際に表示が更新されません。  
下記に簡単なサンプルを記載します。ボタンを押すたびに`data-
value`属性が変わり、`Hello`の背景色が変わるはずです(IE9以降、Chrome、Firefox等では)。

ボタンの上からマウスを外した際に遅れて表示が更新されるようなので、単に画面の再描画ができていないというだけの不具合だと思われるのですが、この現象への対処法(属性値を変更した際にすぐ画面に反映する)をご存知の方がいましたら教えてください。

[code]

    var val=0;
    $('#btn').click(function(){
      val = (val + 1) % 4;
      $('#aaa').attr('data-value', val);
    });
[/code]

[code]

    [data-value="0"]{
      background:cyan;
    }
    [data-value="1"]{
      background:red;
    }
    [data-value="2"]{
      background:green;
    }
    [data-value="3"]{
      background:blue;
    }
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <div id="aaa" data-value="0">Hello</div>
    <button id="btn">push</button>
[/code]


CC BY-SA 3.0
2015-03-03T12:06:30.930
7384
2015-03-05T00:34:22.413
450
question
javascript css internet-explorer
IE8で[attribute="value"]セレクターを使用した際に、DOMの属性の変更が画面が反映されない


どうもブラウザ起因の動きのようです。  
`css()`による色変更なら動きました。

[code]

    var val=0;
    $('#btn').click(function(){
      val = (val + 1) % 4;
      var color = "";
      switch(val){
      case 0: color = "cyan";  break;
      case 1: color = "red";   break;
      case 2: color = "green"; break;
      case 3: color = "blue";  break;
      }
      $('#aaa').css({'background': color});
    });
[/code]

[code]

    #aaa{
      background:cyan;
    }
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    
    <div id="aaa" data-value="0">Hello</div>
    <button id="btn">push</button>
[/code]


CC BY-SA 3.0
2015-03-04T01:22:56.683
7401
2015-03-05T00:34:22.413
2015-03-05T00:34:22.413
7214
7214
7384
answer


本家 Stack Overflow の回答によれば、適当なCSSプロパティや class を再設定することで反映させることができるようです。

[javascript - IE8 not refreshing class after attribute value change - Stack
Overflow](https://stackoverflow.com/a/14222646/2818869)

上の回答のように opacity でやるとこんな感じかと。IE11 の IE8 モードでは動作しました。

[code]

    var val=0;
    $('#btn').click(function(){
      val = (val + 1) % 4;
      $('#aaa').attr('data-value', val).css('opacity', 1);
    });
[/code]

[code]

    [data-value="0"]{
      background:cyan;
    }
    [data-value="1"]{
      background:red;
    }
    [data-value="2"]{
      background:green;
    }
    [data-value="3"]{
      background:blue;
    }
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <div id="aaa" data-value="0">Hello</div>
    <button id="btn">push</button>
[/code]


CC BY-SA 3.0
2015-03-04T05:31:00.280
7417
2015-03-04T05:31:00.280
2017-05-23T12:38:55.250
-1
8000
7384
answer