7

jQuery を使用して「 」に CSS のcounter-increment属性を設定したいと考えています。.demo:before

問題は、jQuery が疑似要素にアクセスできないことです。別の SO の回答 (今は見つけられないようです) は、データ属性を設定し、その値を CSS 内で使用することを提案しましたが、それも機能しません。これは達成できるものですか？

簡単な例: http://jsfiddle.net/4h7hk8td/

HTML:

<ul class="demo">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

JS:

// 1) User Sets Unit Size
var myUnit = 100;

// 2) Unit size is saved via data attribute
$('.demo li').attr('data-unit', myUnit);

CSS:

.demo {
    counter-reset: list;
}

.demo li:before {
    /* 3) CSS gets data attribute and applies as the increment. Not working :( */
    counter-increment: list attr(data-unit);
    content: counter(list);
}
4

3 に答える 3

1

http://jsfiddle.net/7vt0kf2c/liではなく:before、それぞれのカウンターをインクリメントします。

var myUnit = 100;
$(".demo li").css("counter-increment", "list " + myUnit);
$("button").click(function(e) {
    $(".demo li").css("counter-increment", "list " + 200);    
});
于 2015-07-10T16:55:40.310 に答える