HTML | DOM 样式 listStyleImage 属性

listStyleImage 属性用于设置或返回一个图像作为列表项图标。

句法：

• 返回 listStyleImage 属性：

  object.style.listStyleImage

• 设置 listStyleImage 属性：

  object.style.listStyleImage = "none| url| initial| inherit"

特性：

• none：使用此属性，将不显示图像。
• url：用于指定图片的路径。
• initial：用于将属性设置为其默认值。
• 继承：用于从父元素继承属性值。

返回值：返回一个字符串，表示图片的位置路径。

示例 1：显示 none 属性

  

    
        HTML | DOM Style listStyleImage Property
    

  

    
      
       Geeks Press
      
     
 
  
    Clicking on the 'Press' button will showcase 
      the ListStyleImage Property.
    
        G
        E
        E
        K
        S
    
  
    
        function image() {
  
            // Set list style "none".
            document.getElementById(
                    "gfg").style.listStyleImage =
                "none";
        }
    
  

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

示例 2：显示 url 属性

  

    
        HTML | DOM Style listStyleImage Property
    

  

    
      
        Geeks Press
        
       
  
  
    Clicking on the 'Press' button will
      showcase the ListStyleImage Property.
    
        G
        E
        E
        K
        S
    
  
    
        function image() {
  
            // Set list style image using URL.
            document.getElementById(
                    "gfg").style.listStyleImage =
                "url('https://media.geeksforgeeks.org/wp-content/uploads/rlist.png')";
        }
    
  

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

示例 3：显示初始属性

  

    
        HTML | DOM Style listStyleImage Property
    

  

    
      
        Geeks Press
        
      
  
  
    Clicking on the 'Press' button
     will showcase the ListStyleImage Property.
    
        G
        E
        E
        K
        S
    
  
    
        function image() {
  
            // Set list style initial.
            document.getElementById(
                    "gfg").style.listStyleImage =
                "initial";
        }
    
  

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

示例 4：显示继承属性

  

    
        HTML | DOM Style listStyleImage Property
    

  

    
      
        Geeks Press
        
      
  
  
    Clicking on the 'Press' button will
      showcase the ListStyleImage Property.
    
        G
        E
        E
        K
        S
    
  
    
        function image() {
  
            // Set list style inherit.
            document.getElementById(
                    "gfg").style.listStyleImage =
                "inherit";
        }
    
  

  

输出：

在点击按钮之前：

点击按钮后：

浏览器支持： DOM 样式 listStyleImage属性支持的浏览器如下：

• 谷歌浏览器
• IE浏览器
• 火狐
• 歌剧
• 苹果浏览器