[CSS + Javascript] counter-resetを動的に使いたい
リストの表示に対して、ナンバリングをしてくれるcssのcounter機能は便利です。
でも、ページャーなどの場合に、スタートの値が動的に変更する時には、どのようにセットすればいいでしょう？
属性値に開始番号をセットして、attr()と連動するとできそうなものだが、現時点でどのブラウザでも正常に動作しない。
自分がよく使う方法が比較的効率的だと思ったので、メモしておくので、コピペで使ってくだされ。
サンプルHTML
<div class='lists'>
<div class='item'>AAA</div>
<div class='item'>BBB</div>
<div class='item'>CCC</div>
</div>
通常のcounte機能の使い方
.lists{
counter-reset: num;
}
.lists .item::before{
counter-increment: num;
content: counter(num) ".";
margin-right:10px;
}
表示デモ
AAA
BBB
CCC
動的なcounter-resetのセット方法
開始を任意の値にセットするために、style属性にcssのプロパティ変数をセットします。css
.lists{
counter-reset: num var(--num);
}
.lists .item::before{
counter-increment: num;
content: counter(num) ".";
margin-right:10px;
}
Javascript
document.querySelector('.lists').style.setProperty('--num' , 20 , null)
表示デモ
AAA
BBB
CCC