HTML DOM Ol typeプロパティとは？順序付きリストのマーカー種類を変更する方法
HTML DOM の Ol type プロパティは、順序付きリスト（<ol> 要素）で使用されるマーカーの種類に対応する type 属性の値を、取得または設定するためのプロパティです。このプロパティを使うことで、JavaScript から動的にリストの番号スタイル（数字、アルファベット、ローマ数字など）を変更できます。
Ol type プロパティの構文
type プロパティの値を取得する場合
olObject.type
type プロパティに値を設定する場合
olObject.type = '1|a|A|i|I';
type 属性には以下の5種類の値を指定できます。
- '1' … 数字（1, 2, 3, …）
- 'a' … 小文字のアルファベット（a, b, c, …）
- 'A' … 大文字のアルファベット（A, B, C, …）
- 'i' … 小文字のローマ数字（i, ii, iii, …）
- 'I' … 大文字のローマ数字（I, II, III, …）
Ol type プロパティの使用例
ここでは、ボタンをクリックするとリストのマーカーが大文字のローマ数字に変更されるサンプルを紹介します。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Ol type</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
ol{
width: 30%;
margin: 0 auto;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-Ol-type</legend>
<h3>Students</h3>
<ol id="orderList">
<li>Adam</li>
<li>Alex</li>
<li>Bina</li>
<li>Eden</li>
<li>Rajesh</li>
<li>Zampa</li>
</ol>
<input type="button" onclick="changeMarker()" value="Change Marker">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var studentList = document.getElementById("orderList");
function changeMarker() {
studentList.type = 'I';
divDisplay.textContent = 'Marker Changed';
}
</script>
</body>
</html>
実行結果
「Change Marker」ボタンをクリックする前
初期状態では、リストにはデフォルトの数字によるマーカー（1, 2, 3, …）が表示されます。
「Change Marker」ボタンをクリックした後
ボタンをクリックすると changeMarker() 関数が実行され、studentList.type = 'I' によってマーカーが大文字のローマ数字（I, II, III, …）に変更されます。同時に、画面には「Marker Changed」というメッセージが表示されます。
まとめ
HTML DOM の Ol type プロパティを使用すれば、JavaScript を使って順序付きリストのマーカースタイルを動的に変更できます。ユーザーの操作に応じてリストの見た目を切り替えたい場合などに便利なプロパティなので、ぜひ活用してみてください。
-
HTML DOM Input Reset typeプロパティとは?使い方をわかりやすく解説
HTML DOMのInput Resetオブジェクトのtypeプロパティは、type=resetが設定されたinput要素(リセットボタン)に関連付けられています。このプロパティは、リセットボタン要素に対して常に「reset」という文字列を返します。 構文 reset typeプロパティの基本的な構文は以下の通りです。 resetObject.type サンプルコード それでは、reset typeプロパティの具体的な使用例を見ていきましょう。 <!DOCTYPE html> <html> <body> <h1>Input reset type
-
HTML DOM Event typeプロパティとは？イベントの種類を取得する方法を実例付きで解説
HTML DOM Event typeプロパティとはHTML DOMのEvent typeプロパティは、発生したイベントの種類に対応する文字列を返すプロパティです。「click」「keypress」「load」「touchend」など、さまざまなイベントタイプを取得できます。構文イベントの種類を文字列として取得するには、以下のように記述します。event.typeそれでは、Event typeプロパティの具体的な使用例を見ていきましょう。使用例以下のサンプルでは、赤い円形の要素に対して「クリック」または「タッチ」が行われた際に、event.typeでイベントの種類を判定しています。イベントの種