HTML DOMのlistStyleImageプロパティとは？使い方をコード例付きで解説
HTML DOM の listStyleImage プロパティは、リスト項目（<li>）のマーカーとして画像を設定したり、現在設定されている画像を取得したりするために使用されるプロパティです。通常の「●」や「■」といった箇条書き記号の代わりに、任意の画像をリストマーカーとして表示できます。
listStyleImageプロパティの構文
listStyleImage プロパティを設定する場合の構文は以下のとおりです。
object.style.listStyleImage = "none|url|initial|inherit"
指定できる値の一覧
それぞれの値の意味は次の表のとおりです。
| 値 | 説明 |
|---|---|
| none | デフォルト値。画像を表示しません。 |
| url | リストマーカーとして使用する画像のパスを指定します。 |
| initial | このプロパティを初期値に設定します。 |
| inherit | 親要素のプロパティ値を継承します。 |
listStyleImageプロパティの使用例
それでは、listStyleImage プロパティを使った具体的なサンプルコードを見てみましょう。ボタンをクリックすると、リストのマーカーが赤い丸の画像に変更される仕組みです。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<script>
function changeListImage() {
document.getElementById("LIST1").style.listStyleImage =
"url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Red_circle.svg/10px-Red_circle.svg.png')";
document.getElementById("Sample").innerHTML = "リストマーカーが赤い丸の画像に置き換えられました";
}
</script>
</head>
<body>
<ul id="LIST1">
<li>リスト項目1</li>
<li>リスト項目2</li>
<li>リスト項目3</li>
<li>リスト項目4</li>
</ul>
<p>下のボタンをクリックすると、上のリストにリストスタイル画像が設定されます</p>
<button type="button" onclick="changeListImage()">リスト画像を変更</button>
<p id="Sample"></p>
</body>
</html>
実行結果
ページを開いた直後の表示は以下のようになります。
続いて、「リスト画像を変更」ボタンをクリックすると −
このように、ボタンをクリックした瞬間に JavaScript の changeListImage() 関数が呼び出され、ul 要素の style.listStyleImage に画像の URL が設定されることで、リストマーカーが赤い丸の画像へと動的に切り替わります。
補足：関連プロパティとの組み合わせ
listStyleImage プロパティは、単体で使うこともできますが、以下の関連プロパティと組み合わせることで、より柔軟なリストデザインが可能になります。
- listStyleType：リストマーカーの種類（disc、circle、square など）を指定します。画像が読み込めない場合の代替として併用すると便利です。
- listStylePosition：マーカーをリスト内容の内側（inside）に表示するか、外側（outside）に表示するかを指定します。
- listStyle：上記3つのプロパティを一括で shorthand（短縮形）として指定できるプロパティです。
また、CSS 側であれば list-style-image: url('画像のパス'); のように記述することでも同じ効果が得られます。JavaScript から動的に変更したい場合に、今回のような DOM スタイル操作が役立ちます。
-
HTML DOMのlistStyleTypeプロパティとは？使い方と設定できる値を解説
listStyleTypeプロパティとはHTML DOMのStyleオブジェクトが持つlistStyleTypeプロパティは、リスト項目の先頭に表示されるマーカー（記号や番号）の種類を設定したり、現在設定されている値を取得したりするために使用されるプロパティです。構文listStyleTypeプロパティを設定する場合の構文は以下のとおりです。object.style.listStyleType = value主なプロパティ値の一覧listStyleTypeプロパティに指定できる主な値は以下のとおりです。値説明armenian伝統的なアルメニア数字をマーカーとして表示します。circle白抜きの
-
HTML DOMスタイルのlistStylePositionプロパティとは？使い方と設定値を徹底解説
HTML DOMのlistStylePositionプロパティは、リスト項目（li要素）のマーカー（箇条書きの記号）の位置を設定または取得するために使用されるスタイルプロパティです。このプロパティを使うことで、JavaScriptから動的にリストマーカーの表示位置を変更できます。 listStylePositionプロパティの構文 listStylePositionプロパティを設定する場合の構文は以下の通りです。 object.style.listStylePosition = outside|inside|initial|inherit 指定できる値は次の通りです。 値説明 outs