HTML Style listStyle用法及代码示例

样式列表样式属性

list-style-type
list-style-position
list-style-image

用法:

它返回listStyle属性。
```
object.style.listStyle
```

它用来设置listStyle属性。

object.style.listStyle = "type position image|initial|inherit"

属性值：

type:用于标记列表项。
position:这用于放置列表项标记。
image:用于定义列表项标记的图像。
initial:它将listStyle属性设置为其默认值。
inherit:此属性从其父元素继承。

返回值：

它返回表示列表样式的字符串。

示例1：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>DOM Style listStyle Property </title> 
    <style> 
  
    </style> 
  
</head> 
  
<body> 
  
    <h1 style="color:green;width:40%;">  
                GeeksForGeeks  
            </h1> 
    <h2>DOM Style listStyle Property </h2> 
    
    <ul id="gfg"> 
        <li>C</li> 
        <li>C++</li> 
        <li>Python</li> 
        <li>Java</li> 
    </ul> 
  
    <button type="button" onclick="geeks()"> 
        Change ListStyle 
    </button> 
  
    <script> 
        function geeks() { 
            
            //  Set listStyle in square. 
            document.getElementById( 
              "gfg").style.listStyle =  
              "square inside"; 
        } 
    </script> 
  
</body> 
  
</html>

输出：

之前单击按钮：
单击按钮后：

示例2：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>DOM Style listStyle Property </title> 
    <style> 
  
    </style> 
  
</head> 
  
<body> 
  
    <h1 style="color:green;width:40%;">  
                GeeksForGeeks  
            </h1> 
    <h2>DOM Style listStyle Property </h2> 
    
    <ul id="gfg"> 
        <li>C</li> 
        <li>C++</li> 
        <li>Python</li> 
        <li>Java</li> 
    </ul> 
  
    <button type="button" onclick="geeks()"> 
        Change ListStyle 
    </button> 
  
    <script> 
        function geeks() { 
            
            // set listStyle in decimal. 
            document.getElementById( 
              "gfg").style.listStyle =  
              "decimal inside"; 
        } 
    </script> 
  
</body> 
  
</html>

输出：

之前单击按钮：
单击按钮后：

支持的浏览器：下面列出了DOM Style listStyle属性支持的浏览器：

谷歌浏览器
IE浏览器
Firefox
Opera
苹果Safari

相关用法

注：本文由纯净天空筛选整理自bestharadhakrishna大神的英文原创作品 HTML | DOM Style listStyle Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。