HTML | DOM 样式显示属性

HTML DOM 中的 Style 显示属性用于设置或返回元素的显示类型。它类似于可见性属性，用于显示或隐藏元素。 display: none 略有不同，隐藏整个元素，而visibility: hidden 表示只有元素的内容不可见，但元素会保持原来的位置和大小。

句法：

它返回显示属性。
```
object.style.display
```
它设置显示属性。
```
object.style.display = value;
```

属性值：

inline：默认值。它将元素呈现为内联元素。
块：它将元素呈现为块级元素。
紧凑：它将元素呈现为块级或内联，具体取决于上下文。
flex：它将元素呈现为块级弹性框。
inline-block：它将元素呈现为内联框内的块框。
inline-flex：它将元素呈现为内联级别的 flex 框。
内联表：它将元素呈现为内联表。
list-item：它将元素呈现为列表。
标记：它将框之前或之后的内容设置为标记。
none：不显示任何元素。
run-in：它根据上下文将元素呈现为块级或内联。
table：它将元素呈现为块表，在表前后换行。
table-caption：它将元素呈现为表格标题。
表格单元格：它将元素呈现为表格单元格。
table-column：它将元素呈现为一列单元格。
table-column-group：它将元素呈现为一组一个或多个列。
table-footer-group：它将元素呈现为表格页脚行。
table-header-group：它将元素呈现为表格标题行。
table-row：它将元素呈现为表格行。
table-row-group：元素呈现为一组一行或多行。
初始：它将显示属性设置为其默认值。
继承：它从其父元素继承显示属性值。

返回值：返回一个字符串，表示元素的显示类型。

示例 1：此示例描述内联属性值。



  

    
        HTML DOM Style display Property
    

  

    
        HTML DOM Display Property
    
      
    
        Click on the button to set
        display property
    
      
    
        Geeks for Geeks

输出：
点击按钮前：

点击按钮后：

示例 2：此示例描述了 none 属性值。



  

    
        HTML DOM Style display Property
    

  

    
        HTML DOM Display Property
    
      
    
        Click on the button to set
        display property
    
      
    
        Geeks for Geeks

输出：
点击按钮前：

点击按钮后：

示例 3：此示例描述 table-caption 属性值。



  

    
        HTML DOM Style display Property
    

  

    
        HTML DOM Display Property
    
      
    
        Click on the button to set
        display property
    
      
    
        Geeks for Geeks

输出：
点击按钮前：

点击按钮后：

示例 4：此示例描述了块属性值。



  

    
        HTML DOM Style display Property
    

  

    
        HTML DOM Display Property
    
      
    
        Click on the button to set
        display property
    
      
    
        Geeks for Geeks

输出：
点击按钮前：

点击按钮后：

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

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