HTML DOMスタイルのcounterResetプロパティの使い方を徹底解説
counterResetプロパティとは
HTML DOMスタイルのcounterResetプロパティは、カウンターを特定の値にリセットしたり、新しいカウンターを作成したりするために使用されるプロパティです。通常はcounterIncrementプロパティと組み合わせて使用され、カウンターの値を増加または減少させる際に活用されます。
例えば、番号付きリストの採番を途中でやり直したい場合や、独自のカウント処理を実装したい場合などに、このプロパティが役立ちます。
counterResetプロパティの構文
counterResetプロパティを設定するための基本的な構文は以下のとおりです。
object.style.counterReset = "none|name number|initial|inherit"
プロパティ値の詳細
指定できる各プロパティ値の意味は次の表のとおりです。
| 値 | 説明 |
|---|---|
| none | デフォルト値です。カウンターはリセットされません。 |
| name | 指定した名前のカウンターをリセットします。 |
| name number | 各セレクターの出現時に、指定したidのカウンターを指定した数値にリセットします。デフォルトのリセット値は0です。 |
| initial | プロパティを初期値に設定します。 |
| inherit | 親要素のプロパティ値を継承します。 |
counterResetプロパティの使用例
それでは、counterResetプロパティの具体的な使用例を見てみましょう。以下のサンプルコードでは、リスト項目ごとにカウンターを10ずつ増加させ、ボタンをクリックするとカウンターをリセットする処理を実装しています。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<style>
li::after {
counter-increment: demo_var 10;
content: " " counter(demo_var) ".";
}
</style>
<script>
function changeCounterReset(){
document.getElementsByTagName("ul")[0].style.counterReset="demo_var";
document.getElementById("Sample").innerHTML="順序なしリストのカウンターリセット値は demo_var です";
}
</script>
</head>
<body>
<ul>
<li>Demo =</li>
<li>Demo =</li>
<li>Demo =</li>
<li>Demo =</li>
<li>Demo =</li>
<li>Demo =</li>
</ul>
<p>下のボタンをクリックすると、上のリストのcounterReset値が変更されます</p>
<button onclick="changeCounterReset()">Change counterReset</button>
<p id="Sample"></p>
</body>
</html>実行結果
上記のコードを実行すると、各リスト項目の後ろに10ずつ増加する番号が表示されます。
そして、「Change counterReset」ボタンをクリックすると、以下のようにカウンターがリセットされます。
まとめ
counterResetプロパティを使用すると、JavaScriptから動的にカウンターをリセットできます。counterIncrementプロパティと組み合わせることで、柔軟な採番処理が可能になります。リストの番号付けをカスタマイズしたい場合や、動的なカウント表示が必要なWebページを作成する際に、ぜひ活用してみてください。
-
HTML DOM スタイルの counterIncrement プロパティの使い方を徹底解説
HTML DOM の counterIncrement プロパティは、1つ以上の CSS カウンターの値を増加または減少させるために使用されます。通常は counterReset プロパティや content プロパティと組み合わせて使われます。 counterIncrement プロパティの構文 counterIncrement プロパティを設定する際の基本的な構文は以下の通りです。 object.style.counterIncrement = none|id|initial|inherit; プロパティ値の一覧 設定できる各プロパティ値の意味は次の通りです。 値説明 no
-
HTML DOM valueプロパティとは？属性値の取得方法とサンプルコードを解説
HTML DOMのvalueプロパティは、要素が持つ属性（attribute）の値に対応する文字列を返すプロパティです。JavaScriptからHTML要素の属性値を読み取りたい場合に活用できます。基本構文valueプロパティの基本的な書き方は以下の通りです。elementAttribute.value対象となる属性オブジェクトに対して.valueを指定することで、その属性が保持している値を文字列として取得できます。実装例ここでは、画像タグ（<img>）のsrc属性の値をボタンクリック時に取得して画面に表示するサンプルを紹介します。<!DOCTYPE html> <