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：親要素のリストマーカー用の画像を継承。
サンプル
- リスト項目１
- リスト項目２
- リスト項目３
変更後のlist-style-imageプロパティの値：
サンプルの動作について
- 「設定（画像なし）」ボタンをクリックすると、リスト項目１～３のリストマーカーに画像を使用しない。「変更後のlist-style-imageプロパティの値：」の右横に、「none」表示する。
- 「設定（ひまわり）」ボタンをクリックすると、リスト項目１～３のリストマーカーにひまわりの画像を使用する。「変更後のlist-style-imageプロパティの値：」の右横に、「url(“http://alphasis.info/wp-content/uploads/2010/11/material-icon-sunflower-101121-24×24.png”)」と表示する。
- 「設定（桜）」ボタンをクリックすると、リスト項目１～３のリストマーカーに桜の画像を使用する。「変更後の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>
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>リスト項目１</li>
<li>リスト項目２</li>
<li>リスト項目３</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>
<li>リスト項目１</li>
<li>リスト項目２</li>
<li>リスト項目３</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>