[CSS] カスタムデータ属性を動的に変化させた時に子要素のCSSが適用されない件

  • このエントリーをはてなブックマークに追加

例えばこのようなCSSとHTMLコードがあった場合、親要素のカスタムデータ属性をJSで書き換えてもデザインが変化しないことがあったので対応策をメモ。

<div id="hoge">
    <div>ほげ</div>
</div>
div > div {
    background-color: blue;
}
div[data-hoge="red"] > div {
    background-color: red;
}

概要

手元にあるAndroidの以下の機種の標準ブラウザで発生しました。

  • Xperia Z1f Android4.4.2
  • Xperia UL SOL22 Android4.2.2

症状としては親要素のカスタムデータ属性を以下の様なコードで動的に書き換えた時、その変化に対応するCSSを子要素のセレクタに記述しても適用されないという状況です。
ここでは子要素の背景色がデフォルトで青色のところ以下の様なJSコードを用意し、親要素のdata-hoge属性を"red"に書き換えることで、子要素の背景色が赤色になって欲しいのになりません。
※jQuery使用

$(function() {
    $("#hoge").on("click", function() {
        $(this).attr("data-hoge", "red");
    });
});

対策

いろいろ試してみた結果、どうも親要素のクラス属性を何かしら変化させると反映されるみたいなので、JSコードを下記のようにしたら解決しました。

$(function() {
    $("#hoge").on("click", function() {
        $(this).attr("data-hoge", "red").toggleClass("toggle-hoge");
    });
});

親のカスタムデータ属性を書き換えるタイミングで一緒にtoggle-hogeクラスをつけたり外したりします。
toggle-hogeクラス自体には何も意味はありませんがこれで解決しました。よかった。
やっぱキャッシュ関連のバグですかね…

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。




コメントを残す