HTML DOMのlistStyleプロパティの使い方を徹底解説
listStyleプロパティとは
HTML DOMのlistStyleプロパティは、リストのスタイルを制御するためのショートハンド（一括設定）プロパティです。このプロパティを使うことで、以下の3つのCSSプロパティをまとめて設定または取得できます。
- list-style-type：リストマーカーの種類
- list-style-position：リストマーカーの表示位置
- list-style-image：マーカーとして使用する画像
構文
listStyleプロパティを設定する際の構文は以下のとおりです。
object.style.listStyle = "type position image|initial|inherit"
パラメータの説明
| パラメータ | 説明 |
|---|---|
| type | リストアイテムのマーカーの種類を定義します（例：disc、circle、decimal、upper-romanなど）。 |
| position | リストアイテムのマーカーの表示位置を設定します（inside または outside）。 |
| image | リストアイテムのマーカーとして表示する画像をURLで指定します。 |
| initial | このプロパティをデフォルトの初期値に設定します。 |
| inherit | 親要素のプロパティ値を継承します。 |
使用例
ここでは、ボタンをクリックするとリストのスタイルが大文字ローマ数字に変更されるサンプルを紹介します。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<script>
function changeListStyle() {
document.getElementById("LIST1").style.listStyle = "upper-roman";
document.getElementById("Sample").innerHTML = "リストスタイルが大文字ローマ数字に変更されました";
}
</script>
</head>
<body>
<ul id="LIST1">
<li>MANGO</li>
<li>GUAVA</li>
<li>LITCHI</li>
<li>WATERMELON</li>
</ul>
<p>下のボタンをクリックすると、上記リストのスタイルが変更されます</p>
<button type="button" onclick="changeListStyle()">リストスタイルを変更</button>
<p id="Sample"></p>
</body>
</html>実行結果
ページを表示した初期状態では、デフォルトのリストマーカー（disc）が表示されます。
「リストスタイルを変更」ボタンをクリックすると、リストマーカーが大文字ローマ数字（I、II、III、IV）に変化し、メッセージが表示されます。
まとめ
listStyleプロパティを活用すれば、JavaScriptからリストのマーカーの種類・位置・画像を一度に操作できます。個別に設定したい場合は、listStyleType、listStylePosition、listStyleImageプロパティをそれぞれ使用することも可能です。動的にリストの見た目を変更したい場合に、ぜひ活用してみてください。
-
HTML DOM スタイルの transformOrigin プロパティとは？使い方を徹底解説
HTML DOM のスタイルオブジェクトが持つ transformOrigin プロパティは、HTML ドキュメント内の要素に対して 2D または 3D 変換を行う際の「原点（基準点）」を取得・設定するためのプロパティです。要素を回転や拡大縮小させる transform プロパティと組み合わせて使うことで、変換の基準となる位置を自由にコントロールできます。構文（シンタックス）transformOrigin プロパティの基本的な構文は以下のとおりです。値の取得object.style.transformOrigin値の設定object.style.transformOrigin = 値指定できる
-
HTML DOM スタイルの quotes プロパティの使い方を徹底解説
HTML DOM の style オブジェクトの quotes プロパティは、HTML ドキュメント内で引用文を囲むために使用される引用符（クォーテーションマーク）の種類を取得・変更するためのプロパティです。主に <q> 要素や <blockquote> 要素など、引用を表す要素と組み合わせて利用されます。 構文 quotes プロパティの基本的な構文は以下のとおりです。 値の取得 object.style.quotes 値の設定 object.style.quotes = value 設定できる値 value には以下の値を指定できます。 値説明 inheri