HTML - DOM Style 对象 display 属性

HTML DOM Style 对象的 **display** 属性设置或返回元素的显示类型。它类似于 visibility 属性，但区别在于，使用 display:none 会隐藏整个元素，而使用 visibility:hidden 则仅使元素不可见，元素仍然位于其原始位置。

语法

设置 display 属性

object.style.display= value;

获取 display 属性

object.style.display;

属性值

值	描述
inline	这是默认值，它将元素显示为内联元素。
block	它将元素显示为块级元素。
compact	它根据上下文将元素显示为块级或内联元素。
flex	它将元素显示为块级弹性盒。
inline-block	它将元素显示为内联框内的块框。
inline-flex	它将元素显示为内联级弹性盒。
inline-table	它将元素显示为内联表格。
list-item	它将元素显示为列表。
marker	它与 :before 和 :after CSS 伪元素一起使用。它将框前或框后的内容设置为标记。
none	它不显示任何元素。
run-in	它根据上下文将元素显示为块级或内联元素。
table	它将元素显示为块级表格，在表格前后各有一个换行符。
table-caption	它将元素显示为表格标题。
table-cell	它将元素显示为表格单元格。
table-column	它将元素显示为单元格列。
table-column-group	它将元素显示为一个或多个列的组。
table-footer-group	它将元素显示为表格脚注行。
table-header-group	它将元素显示为表格表头行。
table-row	它将元素显示为表格行。
table-row-group	它将元素显示为一个或多个行的组。
initial	它用于将此属性设置为其默认值。
inherit	它用于继承其父元素的属性。

返回值

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

HTML DOM Style 对象“display”属性示例

以下示例说明了 display 属性的不同属性值。

设置 Display 属性

在此示例中，我们已将 display 属性值设置为“inline”、“block”和“none”。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #display {
            height: 400px;
            width: 400px;
            background-color: blanchedalmond;
        }
    </style>
    <title>
        HTML DOM Style Object display Property
    </title>
</head>
<body>
    <p>Click to change display style</p>
    <button onclick="fun()">Inline</button>
    <button onclick="funTwo()">Block</button>
    <button onclick="funThree()">None</button>
    <br>
    <div id="display">
        Welcome to TutorialsPoint..
    </div>
    <script>
        function fun() {
            document.getElementById("display")
                .style.display = "inline";
        }
        function funTwo() {
            document.getElementById("display")
                .style.display = "block";
        }
        function funThree() {
            document.getElementById("display")
                .style.display = "none";
        }
    </script>
</body>
</html>

获取 Display 属性

在此示例中，我们使用了两个 display 属性值，它们分别是“table-caption”和“none”，并且我们还获取了所用属性值的名称。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #display {
            height: 400px;
            width: 400px;
            background-color: blanchedalmond;
        }
    </style>
    <title>
        HTML DOM Style Object display Property
    </title>
</head>
<body>
    <p>Click to change display style</p>
    <button onclick="funThree()">Table Caption</button>
    <button onclick="funTwo()">None</button>
    <br>
    <div id="display">
        Welcome to <span id="cap">TutorialsPoint</span>
    </div>
    <p id="output"></p>
    <script>
        function funThree() {
            let x=document.getElementById("cap")
                .style.display = "table-caption";
            document.getElementById("output").innerHTML=x
        }
        function funTwo() {
            let x=document.getElementById("display")
                .style.display = "none";
            document.getElementById("output").innerHTML=x
        }        
    </script>
</body>
</html>

支持的浏览器

属性
display	是 1	是 12	是 1	是 1	是 7

html_dom_style_object_reference.htm

打印页面