構文 |
|
| document.属性.style.listStyleType = "種類" ［DOM属性］ |
種類 |
|
| none | disc | circle | square | lower-roman | upper-roman | lower-alpha | upper-alpha | lower-greek | decimal | decimal-leading-zero | lower-latin | upper-latin| cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | hebrew | armenian | georgian |
|
|
説明
- スタイルシート内のリストの形式を値に持つ。後から「listStyleType」属性に値を設定することで，リストの形式を変更することも可能。
- 設定できる値のうち「none」は表示なし，「disc」は黒丸，「circle」は線で書かれた丸，「square」は四角，「lower-roman」はローマ数字(小文字)，「upper-roman」はローマ数字(大文字)，「lower-alpha」はアルファベット(小文字)，「upper-alpha」はアルファベット(大文字)，「lower-greek」はギリシャ文字(小文字)，「decimal」は算用数字，「decimal-leading-zero」は頭に0を付けた算用数字，「lower-latin」はアルファベット(小文字)，「upper-latin」はアルファベット(大文字)，「cjk-ideographic」は漢数字，「hiragana」は平仮名(50音順)，「katakana」はカタカナ(50音順)，「hiragana-iroha」は平仮名(いろは順)，「katakana-iroha」はカタカナ(イロハ順)，「hebrew」はヘブライ数字，「armenian」はアルメニア数字，「georgian」はグルジア数字となる。
- スタイルシートでは，「list-style-type」プロパティにあたる。
- 用例では，ボタンをクリックした時，id名「STY」を設定したdiv要素のリスト形式の値を変更することで，リストの形式を変更している。対応している形式は，ブラウザやOS，使用言語，インストールしているフォントなどの環境によって，違いがある。そのうち用例で示した，「none」，「disc」，「circle」，「square」，「lower-roman」，「upper-roman」，「lower-alpha」，「upper-alpha」は，比較的多くの環境でサポートされているようである。
用例
ボタン・フォームをクリックした時「listStyleType」属性に値を設定することにより，id名「STY」を設定したul要素内にあるリストの形式が変わる。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>listStyleType</title>
<script type="text/javascript">
<!--
function SList(VALUE){
if(document.getElementById){
document.getElementById("STY").style.listStyleType = VALUE
}
}
//-->
</script>
<style type="text/css">
<!--
body { background-color: #ffffff; }
-->
</style>
</head>
<body>
*リストの形式
<hr>
<form>
<input type="button" value=" none " onClick="SList('none')">
<input type="button" value=" disc " onClick="SList('disc')">
<input type="button" value=" circle " onClick="SList('circle')">
<input type="button" value=" square " onClick="SList('square')">
<input type="button" value=" lower-roman " onClick="SList
('lower-roman')">
<input type="button" value=" upper-roman " onClick="SList
('upper-roman')">
<input type="button" value=" lower-alpha " onClick="SList
('lower-alpha')">
<input type="button" value=" upper-alpha " onClick="SList
('upper-alpha')">
</form>
<hr>
<ul id="STY">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
</body></html>
この用例を実行する
