style.listStyleTypeプロパティ

style.listStyleTypeは、リスト要素のスタイル属性のlist-style-typeプロパティの値を取得、もしくは、設定するプロパティ。

list-style-typeプロパティは、順不同リストや順序リストのリスト項目のリストマーカーやリスト番号の種類を指定することができる。

構文

取得

var $listStyleType = $elementReference.style.listStyleType;

戻り値

リスト要素のスタイル属性のlist-style-typeプロパティの値。

設定

$elementReference.style.listStyleType = "value";
value
リストマーカーやリスト番号の種類を指定。
下記の何れかの方法で指定する。順不同リストにおける初期設定値は「disc(黒い丸)」。順序リストにおける初期設定値は「decimal(数字)」。
  • disc:黒い丸。
  • circle:白い丸。
  • square:黒い四角。
  • decimal:数字。
  • decimal-leading-zero:2桁の数字。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:親要素のリストマーカーやリスト番号の種類を継承。

サンプル

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









変更後のlist-style-typeプロパティの値:

サンプルの動作について

各ボタンをクリックすると、リスト項目1~3のリストマーカーやリスト番号が、各ボタン名の丸括弧内のリストマーカーやリスト番号になる。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function setListStyleType( $listStyleType ) {
 var $elementReference = document.getElementById( "sample" );
 $elementReference.style.listStyleType = $listStyleType;
 var $listStyleType = $elementReference.style.listStyleType;
 document.getElementById( "sampleOutput" ).innerHTML = $listStyleType;
}
</script>

HTML

<ol id="sample" style="margin-left: 50px;">
 <li>リスト項目1</li>
 <li>リスト項目2</li>
 <li>リスト項目3</li>
</ol>
<button onclick="setListStyleType('disc');">設定(黒い丸)</button>
<button onclick="setListStyleType('circle');">設定(白い丸)</button>
<button onclick="setListStyleType('square');">設定(黒い四角)</button>
<br />
<button onclick="setListStyleType('decimal');">設定(数字)</button>
<button onclick="setListStyleType('decimal-leading-zero');">設定(2桁の数字)</button>
<br />
<button onclick="setListStyleType('upper-roman');">設定(大文字のローマ数字)</button>
<button onclick="setListStyleType('lower-roman');">設定(小文字のローマ数字)</button>
<br />
<button onclick="setListStyleType('cjk-ideographic');">設定(漢数字)</button>
<button onclick="setListStyleType('hebrew');">設定(ヘブライ数字)</button>
<button onclick="setListStyleType('armenian');">設定(アルメニア数字)</button>
<button onclick="setListStyleType('georgian');">設定(グルジア数字)</button>

<br />
<button onclick="setListStyleType('upper-alpha');">設定(大文字のアルファベット)</button>
<button onclick="setListStyleType('lower-alpha');">設定(小文字のアルファベット)</button>
<br />
<button onclick="setListStyleType('upper-latin');">設定(大文字のアルファベット)</button>
<button onclick="setListStyleType('lower-latin');">設定(小文字のアルファベット)</button>
<br />
<button onclick="setListStyleType('lower-greek');">設定(小文字のギリシャ文字)</button>

<br />
<button onclick="setListStyleType('hiragana');">設定(ひらがな)</button>
<button onclick="setListStyleType('katakana');">設定(カタカナ)</button>
<button onclick="setListStyleType('hiragana-iroha');">設定(いろはにほへと)</button>
<button onclick="setListStyleType('katakana-iroha');">設定(イロハニホヘト)</button>

<br />
<button onclick="setListStyleType('none');">設定(なし)</button>
<button onclick="setListStyleType('inherit');">設定(継承)</button>

<br />
<p>変更後のlist-style-typeプロパティの値:<span id="sampleOutput"></span></p>

スポンサード リンク

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