style.listStyleは、リスト要素のスタイル属性のlist-styleプロパティの値を取得、もしくは、設定するプロパティ。
list-styleプロパティは、順不同リストや順序リストのリスト項目のリストマーカーやリスト番号の種類と位置と画像を、一括指定することができる。
構文
取得
var $listStyle = $elementReference.style.listStyle;
戻り値
リスト要素のスタイル属性のlist-styleプロパティの値。
設定
$elementReference.style.listStyle = "type position image";
- type
- リストマーカーやリスト番号の種類を指定。
- 下記の何れかの方法で指定する。順不同リストにおける初期設定値は「disc（黒い丸）」。順序リストにおける初期設定値は「decimal（数字）」。
- disc：黒い丸。
- circle：白い丸。
- square：黒い四角。
- decimal：数字。
- decimal-leading-zero：２桁の数字。10未満の数字の場合、先頭に 0 が付く。
- upper-roman：大文字のローマ数字。
- lower-roman：小文字のローマ数字。。
- cjk-ideographic：漢数字。
- hebrew：ヘブライ数字。
- armenian：アルメニア数字。
- georgian：グルジア数字。
- upper-alpha：大文字のアルファベット。
- lower-alpha：小文字のアルファベット。
- upper-latin：大文字のアルファベット。
- lower-latin：小文字のアルファベット。
- lower-greek：小文字のギリシャ文字。
- hiragana：ひらがな。
- katakana：カタカナ。
- hiragana-iroha：ひらがな。
- katakana-iroha：カタカナ。
- none：リストマーカーなし。
- inherit：親要素のリストマーカーやリスト番号の種類を継承。
- 詳しくは、style.listStyleTypeプロパティのページへ。
- position
- リストマーカーやリスト番号の表示位置を指定。
- 下記の何れかの方法で指定する。初期設定値は「outside」。
- outside：リストボックスの外側。
- inside：リストボックスの内側。
- inherit：親要素のリストマーカーやリスト番号の表示位置を継承。
- 詳しくは、style.listStylePositionプロパティのページへ。
- image
- リストマーカー用の画像を指定。
- 下記の何れかで指定する。初期設定値は「none」。
- none：リストマーカーに画像を使用しない。
-
url：リストマーカー用の画像のURLを、
url('と')で括り指定。
例：url('http://hoge.tld/sample.png') - inherit：親要素のリストマーカー用の画像を継承。
- 詳しくは、style.listStyleImageプロパティのページへ。
サンプル
- リスト項目１
- リスト項目２
- リスト項目３
変更後のlist-styleプロパティの値：
サンプルの動作について
- 「設定（黒い丸、外側）」ボタンをクリックすると、黒い丸のリストマーカーをリストボックスの外側に表示する。「変更後のlist-style-imageプロパティの値：」の右横に、「disc outside none」と表示する。
- 「設定（白い丸、内側）」ボタンをクリックすると、白い丸のリストマーカーをリストボックスの内側に表示する。「変更後のlist-style-imageプロパティの値：」の右横に、「circle inside none」と表示する。
- 「設定（ひまわり、外側）」ボタンをクリックすると、ひまわりの画像のリストマーカーをリストボックスの外側に表示する。「変更後のlist-style-imageプロパティの値：」の右横に、「disc outside url(“http://alphasis.info/wp-content/uploads/2010/11/material-icon-sunflower-101121-24×24.png”)」と表示する。
- 「設定（桜）、内側」ボタンをクリックすると、桜の画像のリストマーカーをリストボックスの内側に表示する。「変更後のlist-style-imageプロパティの値：」の右横に、「disc inside url(“http://alphasis.info/wp-content/uploads/2010/11/material-icon-sakura-101124-24×23-ffaaaaff.png”)」と表示する。
- 「設定（数字、外側）」ボタンをクリックすると、数字のリスト番号をリストボックスの外側に表示する。「変更後のlist-style-imageプロパティの値：」の右横に、「decimal outside none」と表示する。
- 「設定（２桁の数字、内側）」ボタンをクリックすると、２桁の数字のリスト番号をリストボックスの内側に表示する。「変更後のlist-style-imageプロパティの値：」の右横に、「decimal-leading-zero inside none」と表示する。
- 「設定（なし）」ボタンをクリックすると、リストマーカーを表示しない。「変更後のlist-style-imageプロパティの値：」の右横に、「none outside none」表示する。
- 「設定（継承）」ボタンをクリックすると、親要素のリストマーカーの設定を継承。「変更後のlist-style-imageプロパティの値：」の右横に、「inherit」表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setListStyle( $listStyle ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.style.listStyle = $listStyle;
var $listStyle = $elementReference.style.listStyle;
document.getElementById( "sampleOutput" ).innerHTML = $listStyle;
}
</script>
function setListStyle( $listStyle ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.style.listStyle = $listStyle;
var $listStyle = $elementReference.style.listStyle;
document.getElementById( "sampleOutput" ).innerHTML = $listStyle;
}
</script>
HTML
<ol id="sample" style="margin-left: 50px;">
<li>リスト項目１</li>
<li>リスト項目２</li>
<li>リスト項目３</li>
</ol>
<button onclick="setListStyle('disc outside none');">設定（黒い丸、外側）</button>
<button onclick="setListStyle('circle inside none');">設定（白い丸、内側）</button>
<br />
<button onclick="setListStyle('disc outside URL(\'http://alphasis.info/wp-content/uploads/2010/11/material-icon-sunflower-101121-24x24.png\')');">設定（ひまわり、外側）</button>
<button onclick="setListStyle('disc inside URL(\'http://alphasis.info/wp-content/uploads/2010/11/material-icon-sakura-101124-24x23-ffaaaaff.png\')');">設定（桜、内側）</button>
<br />
<button onclick="setListStyle('decimal outside none');">設定（数字、外側）</button>
<button onclick="setListStyle('decimal-leading-zero inside none');">設定（２桁の数字、内側）</button>
<br />
<button onclick="setListStyle('none');">設定（なし）</button>
<button onclick="setListStyle('inherit');">設定（継承）</button>
<br />
<p>変更後のlist-styleプロパティの値：<span id="sampleOutput"></span></p>
<li>リスト項目１</li>
<li>リスト項目２</li>
<li>リスト項目３</li>
</ol>
<button onclick="setListStyle('disc outside none');">設定（黒い丸、外側）</button>
<button onclick="setListStyle('circle inside none');">設定（白い丸、内側）</button>
<br />
<button onclick="setListStyle('disc outside URL(\'http://alphasis.info/wp-content/uploads/2010/11/material-icon-sunflower-101121-24x24.png\')');">設定（ひまわり、外側）</button>
<button onclick="setListStyle('disc inside URL(\'http://alphasis.info/wp-content/uploads/2010/11/material-icon-sakura-101124-24x23-ffaaaaff.png\')');">設定（桜、内側）</button>
<br />
<button onclick="setListStyle('decimal outside none');">設定（数字、外側）</button>
<button onclick="setListStyle('decimal-leading-zero inside none');">設定（２桁の数字、内側）</button>
<br />
<button onclick="setListStyle('none');">設定（なし）</button>
<button onclick="setListStyle('inherit');">設定（継承）</button>
<br />
<p>変更後のlist-styleプロパティの値：<span id="sampleOutput"></span></p>