style.listStyleImageプロパティ

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

list-style-imageプロパティは、リスト項目のリストマーカー用の画像を指定することができる。

構文

取得

var $listStyleImage = $elementReference.style.listStyleImage;

戻り値

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

設定

$elementReference.style.listStyleImage = "none | url | inherit";
none | url | inherit
リストマーカーの画像を指定。
下記の何れかで指定する。初期設定値は「none」。
  • none:リストマーカーに画像を使用しない。
  • url:リストマーカー用の画像のURLを、url('')で括り指定。
     例:url('http://hoge.tld/sample.png')
  • inherit:親要素のリストマーカー用の画像を継承。

サンプル

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

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

サンプルの動作について

  • 「設定(画像なし)」ボタンをクリックすると、リスト項目1~3のリストマーカーに画像を使用しない。「変更後のlist-style-imageプロパティの値:」の右横に、「none」表示する。
  • 「設定(ひまわり)」ボタンをクリックすると、リスト項目1~3のリストマーカーにひまわりの画像を使用する。「変更後のlist-style-imageプロパティの値:」の右横に、「url(“http://alphasis.info/wp-content/uploads/2010/11/material-icon-sunflower-101121-24×24.png”)」と表示する。
  • 「設定(桜)」ボタンをクリックすると、リスト項目1~3のリストマーカーに桜の画像を使用する。「変更後のlist-style-imageプロパティの値:」の右横に、「url(“http://alphasis.info/wp-content/uploads/2010/11/material-icon-sakura-101124-24×23-ffaaaaff.png”)」と表示する。
  • 「設定(継承)」ボタンをクリックすると、親要素のリストマーカー用の画像を継承。このサンプルの場合、画像を使用しない。「変更後のlist-style-imageプロパティの値:」の右横に、「inherit」表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function setListStyleImage( $listStyleImage ) {
 var $elementReference = document.getElementById( "sample" );
 if( $listStyleImage == 'none' || $listStyleImage == 'inherit' ){
  $elementReference.style.listStyleImage = $listStyleImage;
 }else{
  $elementReference.style.listStyleImage = "url('" + $listStyleImage + "')";
 }
 var $listStyleImage = $elementReference.style.listStyleImage;
 document.getElementById( "sampleOutput" ).innerHTML = $listStyleImage;
}
</script>

HTML

<ul id="sample" style="margin: 10px 50px; font-size: 22px;">
 <li>リスト項目1</li>
 <li>リスト項目2</li>
 <li>リスト項目3</li>
</ul>
<button onclick="setListStyleImage('none');">設定(画像なし)</button>
<button onclick="setListStyleImage('http://alphasis.info/wp-content/uploads/2010/11/material-icon-sunflower-101121-24x24.png');">設定(ひまわり)</button>
<button onclick="setListStyleImage('http://alphasis.info/wp-content/uploads/2010/11/material-icon-sakura-101124-24x23-ffaaaaff.png');">設定(桜)</button>
<button onclick="setListStyleImage('inherit');">設定(継承)</button>
<br />
<p>変更後のlist-style-imageプロパティの値:<span id="sampleOutput"></span></p>

スポンサード リンク

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