HTML DOM Style listStylePosition 属性

htmlweb developmentfront end technology更新于 2024/3/17 0:44:17

HTML DOM Style listStylePosition 属性用于设置或返回列表项标记位置。

以下是语法 −

设置 listStylePosition 属性 −

object.style.listStylePosition = "outside|inside|initial|inherit"

以上属性解释如下 −

值	描述
outside	这是默认值，将列表项标记放置在文本之前。
inside	这会将列表项标记稍微向内缩进。
initial	将此属性设置为初始值。
inherit	继承父级属性值

让我们看一个 listStylePosition 属性的示例 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
   li{
      background-color:lightgreen;
   }
</style>
<script>
   function changeListPosition() {
      document.getElementById("LIST1").style.listStylePosition = "inside";
      document.getElementById("Sample").innerHTML=" The list style position is now set to inside from    default outside.";
   }
</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 above list style position by clicking the below button</p>
   <button type="button" onclick="changeListPosition()">Change List Position</button>
   <p id="Sample"></p>
</body>
</html>