style.listStylePositionは、リスト要素のスタイル属性のlist-style-positionプロパティの値を取得、もしくは、設定するプロパティ。
list-style-positionプロパティは、順不同リストや順序リストのリスト項目のリストマーカーやリスト番号の表示位置を指定することができる。
構文
取得
var $listStylePosition = $elementReference.style.listStylePosition;
戻り値
リスト要素のスタイル属性のlist-style-positionプロパティの値。
設定
$elementReference.style.listStylePosition = "outside | inside | inherit";
- outside | inside | inherit
- リストマーカーやリスト番号の表示位置を指定。
- 下記の何れかの方法で指定する。初期設定値は「outside」。
- outside：リストボックスの外側。
- inside：リストボックスの内側。
- inherit：親要素のリストマーカーやリスト番号の表示位置を継承。
サンプル
- リスト項目１
- リスト項目２
- リスト項目３
変更後のlist-style-positionプロパティの値：
サンプルの動作について
- 「設定（外側）」ボタンをクリックすると、リスト番号をリストボックスの外側に表示する。「変更後のlist-style-positionプロパティの値：」の右横に「outside」と表示する。
- 「設定（内側）」ボタンをクリックすると、リスト番号をリストボックスの内側に表示する。「変更後のlist-style-positionプロパティの値：」の右横に「inside」と表示する。
- 「設定（継承）」ボタンをクリックすると、親要素のリスト番号の表示位置を継承し、「変更後のlist-style-positionプロパティの値：」の右横に「inherit」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setListStylePosition( $listStylePosition ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.style.listStylePosition = $listStylePosition;
var $listStylePosition = $elementReference.style.listStylePosition;
document.getElementById( "sampleOutput" ).innerHTML = $listStylePosition;
}
</script>
function setListStylePosition( $listStylePosition ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.style.listStylePosition = $listStylePosition;
var $listStylePosition = $elementReference.style.listStylePosition;
document.getElementById( "sampleOutput" ).innerHTML = $listStylePosition;
}
</script>
HTML
<ol id="sample" style="margin-left: 50px; background-color: yellow;">
<li>リスト項目１</li>
<li>リスト項目２</li>
<li>リスト項目３</li>
</ol>
<button onclick="setListStylePosition('outside');">設定（外側）</button>
<button onclick="setListStylePosition('inside');">設定（内側）</button>
<button onclick="setListStylePosition('inherit');">設定（継承）</button>
<br />
<p>変更後のlist-style-positionプロパティの値：<span id="sampleOutput"></span></p>
<li>リスト項目１</li>
<li>リスト項目２</li>
<li>リスト項目３</li>
</ol>
<button onclick="setListStylePosition('outside');">設定（外側）</button>
<button onclick="setListStylePosition('inside');">設定（内側）</button>
<button onclick="setListStylePosition('inherit');">設定（継承）</button>
<br />
<p>変更後のlist-style-positionプロパティの値：<span id="sampleOutput"></span></p>