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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。