HTML Style display用法及代码示例

HTML DOM中的样式显示属性用于设置或返回元素的显示类型。它类似于显示或隐藏元素的可见性属性。 display：none稍有不同，隐藏了整个元素，而visible：hidden意味着仅元素的内容是不可见的，但元素将保持其原始位置和大小。

用法:

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

属性值：

inline:它是默认值。它将元素呈现为嵌入式元素。
block:它将元素呈现为block-level元素。
compact:根据上下文，它将元素呈现为block-level或嵌入式。
flex:它将元素呈现为block-level弹性框。
inline-block：它将元素呈现为内联框内的块框。
inline-flex：它将元素呈现为inline-level弹性框。
inline-table：它将元素呈现为内联表。
list-item：它将元素呈现为列表。
marker:它将框之前或之后的内容设置为标记。
none:它不会显示任何元素。
run-in：根据上下文，它将元素呈现为block-level或内联。
table:它将元素呈现为块表，在该表的前后都有换行符。
table-caption：它将元素呈现为表格标题。
table-cell：它将元素呈现为表格单元格。
table-column：它将元素呈现为单元格列。
table-column-group：它将元素呈现为一组一个或多个列。
table-footer-group：它将元素呈现为表格页脚行。
table-header-group：它将元素呈现为表标题行。
table-row：它将元素呈现为表格行。
table-row-group：元素呈现为一组一个或多个行。
initial:它将显示属性设置为其默认值。
inherit:它从其父元素继承显示属性值。

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

范例1：本示例描述了内联属性值。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML DOM Style display Property 
    </title> 
</head> 
  
<body> 
    <h2> 
        HTML DOM Display Property 
    </h2> 
      
    <p> 
        Click on the button to set 
        display property 
    </p> 
      
    <div id = "GFG"> 
        Geeks for Geeks 
    </div> 
      
    <button onclick="myGeeks()"> 
        Press 
    </button> 
      
    <!-- script to set display property -->
    <script> 
        function myGeeks() { 
            document.getElementById("GFG").style.display 
                    = "inline"; 
        } 
    </script> 
</body> 
  
</html>

输出：
在单击按钮之前：

单击按钮后：

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

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML DOM Style display Property 
    </title> 
</head> 
  
<body> 
    <h2> 
        HTML DOM Display Property 
    </h2> 
      
    <p> 
        Click on the button to set 
        display property 
    </p> 
      
    <div id = "GFG"> 
        Geeks for Geeks 
    </div> 
      
    <button onclick="myGeeks()"> 
        Press 
    </button> 
      
    <!-- script to set display property -->
    <script> 
        function myGeeks() { 
            document.getElementById("GFG").style.display 
                    = "none"; 
        } 
    </script> 
</body> 
  
</html>

输出：
在单击按钮之前：

单击按钮后：

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

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML DOM Style display Property 
    </title> 
</head> 
  
<body> 
    <h2> 
        HTML DOM Display Property 
    </h2> 
      
    <p> 
        Click on the button to set 
        display property 
    </p> 
      
    <div id = "GFG"> 
        Geeks for Geeks 
    </div> 
      
    <button onclick="myGeeks()"> 
        Press 
    </button> 
      
    <!-- script to set display property -->
    <script> 
        function myGeeks() { 
            document.getElementById("GFG").style.display 
                    = "table-caption"; 
        } 
    </script> 
</body> 
  
</html>

输出：
在单击按钮之前：

单击按钮后：

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

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML DOM Style display Property 
    </title> 
</head> 
  
<body> 
    <h2> 
        HTML DOM Display Property 
    </h2> 
      
    <p> 
        Click on the button to set 
        display property 
    </p> 
      
    <div id = "GFG"> 
        Geeks for Geeks 
    </div> 
      
    <button onclick="myGeeks()"> 
        Press 
    </button> 
      
    <!-- script to set display property -->
    <script> 
        function myGeeks() { 
            document.getElementById("GFG").style.display 
                    = "block"; 
        } 
    </script> 
</body> 
  
</html>

输出：
在单击按钮之前：

单击按钮后：

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

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

相关用法

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