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