HTML DOM Style listStyleType 属性

htmlweb developmentfront end technology更新于 2024/3/17 1:16:17

HTML DOM 样式 listStyletype 属性用于设置或返回列表项标记类型。

以下是语法 −

设置 listStyleType 属性 −

object.style.listStyleType = 值

部分 listStyleType 属性值为 −

值	描述
armenian	将标记设置为传统的亚美尼亚数字。
circle	圆圈标记。
cjk-ideographic	设置纯表意数字作为标记。
decimal	设置标记数字，此为默认值。
decimal-leading-zero	在设置为标记的数字前添加一个 0。
disc	<ul> 的默认值标记是实心圆圈。
hiragana	将传统平假名编号设置为标记。
katakana	将传统片假名编号设置为标记。
lower-alpha	将标记设置为小写字母。
lower-greek	设置小写希腊字母作为标记。
none	不显示标记。
square	将标记显示为正方形。
upper-alpha	将大写字母设置为标记。
initial	将此属性设置为初始值。
inherit	继承父级属性值

我们来看一个 listStyleType 属性的示例 −

示例

<!DOCTYPE html>
<html>
<head>
<script>
   function changeListType() {
      document.getElementById("LIST1").style.listStyleType = "upper-roman";
      document.getElementById("Sample").innerHTML=" The list style type is now set to uppercase roman       numeral";
   }
</script>
</head>
<body>
   <ul id="LIST1">
      <li>LIST ITEM1</li>
      <li>LIST ITEM2</li>
      <li>LIST ITEM3</li>
      <li>LIST ITEM4</li>
   </ul>
   <p>Change the above list style type by clicking the below button</p>
   <button type="button" onclick="changeListType()">Change List Type</button>
   <p id="Sample"></p>
</body>
</html>