style.listStyleTypeプロパティ

投稿日: 2013年11月11日 作成者: alphasis

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：２桁の数字。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. リスト項目１
  2. リスト項目２
  3. リスト項目３









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

サンプルの動作について

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

サンプルのソースコード

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>リスト項目１</li>
 <li>リスト項目２</li>
 <li>リスト項目３</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');">設定（２桁の数字）</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オブジェクト, プロパティ, リスト, リファレンス パーマリンク