5

コンテキスト: HTML5 data- attributesを使用する HTML ページがあります。私の CSS スタイルのいくつかは、属性セレクターを使用して、それらのカスタム属性の値に基づいて要素をスタイルします。

問題: JavaScript を使用して data- 属性の値を更新すると、Chrome は影響を受ける要素のスタイルを変更して正しく応答しますが、IE8 (サポートする必要があります) はすぐには応答しません。classIE8 にスタイルを更新させる唯一の方法は、他の方法 (属性の削除や変更など) で CSS スタイルを直接いじることです。

例：

<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>

Chrome では、Test1 と Test2 のバーをクリックすると、すぐに赤に変わります。IE8 では、バーをクリックしてからボタンを 2 回クリックする必要があります (クラスを削除するには 1 回、クラスを復元​​するにはもう一度)。

質問:回避策は何ですか? 明らかに、私は1つを特定しました（クラスの追加/削除）が、それは醜いです。要素の属性をいじらずに、IE8 に要素のスタイルを強制的に再評価させるエレガントで目立たない方法はありますか?

4

2 に答える 2

18

data-*多くの属性を変更するとリフローが発生しますが、これはInternet Explorer 8 の属性には当てはまらないようです。これらを変更しても、要素がすぐに再描画されるわけではありません。手動でリフローをトリガーする必要があります。

el.setAttribute("data-foo", "foo");
el.style.opacity = 1;

上記の例では、要素の不透明度を 1 に設定してリフローをトリガーしました。zoom プロパティを 1 に設定することも、要素の className をそれ自体に設定することもできます。

el.className = el.className;

これらのいずれも、属性セレクターに基づいて新しいスタイルをすぐに適用する必要があります。幸いなことに、これはデータ属性の広範な使用に先行するブラウザーである IE8 にあったため、そこで少し苦しむ必要がありますが、IE9 や IE10 ではその必要はありません。リフローの問題への特別な注意。

于 2013-01-08T19:32:36.877 に答える
0

jQuery の可能性がある場合は onclick を使用しないでください。

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

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

IE では、常に javascript-error-console を確認する必要があります。

デモ

于 2013-01-08T20:20:27.673 に答える