style.listStylePositionプロパティ

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:親要素のリストマーカーやリスト番号の表示位置を継承。

サンプル

  1. リスト項目1
  2. リスト項目2
  3. リスト項目3

変更後の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>

HTML

<ol id="sample" style="margin-left: 50px; background-color: yellow;">
 <li>リスト項目1</li>
 <li>リスト項目2</li>
 <li>リスト項目3</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>

スポンサード リンク

カテゴリー: DOM, JavaScript, Styleオブジェクト, プロパティ, リスト, リファレンス パーマリンク