免費(fèi)AI編程助手
Style display 屬性
Style 對象
定義和用法
display 屬性設(shè)置或返回元素的顯示類型。
HTML 中的元素大多是"內(nèi)聯(lián)"或"塊"元素：一個(gè)內(nèi)聯(lián)元素，在其左側(cè)和右側(cè)都是浮動(dòng)內(nèi)容。一個(gè)塊元素填滿整個(gè)行，并沒有什么可顯示在其左側(cè)或右側(cè)。
display 屬性還允許作者顯示或隱藏一個(gè)元素。與 visibility 屬性類似。然而，如果您設(shè)置 display:none，將隱藏整個(gè)元素，如果您設(shè)置 visibility:hidden，元素的內(nèi)容將不可見，但元素保持原來的位置和大小。
語法
設(shè)置 display 屬性：
Object.style.display="value"
返回 display 屬性：
Object.style.display
| 值 | 描述 |
|---|---|
| block | 元素呈現(xiàn)為塊級元素。 |
| compact | 元素呈現(xiàn)為塊級元素或內(nèi)聯(lián)元素，取決于上下文。 |
| inherit | display 屬性的值從父元素繼承。 |
| inline | 默認(rèn)。元素呈現(xiàn)為內(nèi)聯(lián)元素。 |
| inline-block | 元素呈現(xiàn)為內(nèi)聯(lián)盒子內(nèi)的塊盒子。 |
| inline-table | 元素呈現(xiàn)為內(nèi)聯(lián)表格（類似 <table>），表格前后沒有換行符。 |
| list-item | 元素呈現(xiàn)為列表。 |
| marker | 該值在盒子前后設(shè)置內(nèi)容作為標(biāo)記（與 :before 和 :after 偽元素一起使用，否則該值與 "inline" 是相同的）。 |
| none | 元素不會(huì)被顯示。 |
| run-in | 元素呈現(xiàn)為塊級或內(nèi)聯(lián)元素，取決于上下文。 |
| table | 元素呈現(xiàn)為塊級表格（類似 <table>），表格前后帶有換行符。 |
| table-caption | 元素呈現(xiàn)為表格標(biāo)題（類似 <caption>）。 |
| table-cell | 元素呈現(xiàn)為表格單元格（類似 <td> 和 <th>）。 |
| table-column | 元素呈現(xiàn)為單元格的列（類似 <col>）。 |
| table-column-group | 元素呈現(xiàn)為一個(gè)或多個(gè)列的分組（類似 <colgroup>）。 |
| table-footer-group | 元素呈現(xiàn)為表格頁腳行（類似 <tfoot>）。 |
| table-header-group | 元素呈現(xiàn)為表格頁眉行（類似 <thead>）。 |
| table-row | 元素呈現(xiàn)為表格行（類似 <tr>）。 |
| table-row-group | 元素呈現(xiàn)為一個(gè)或多個(gè)行的分組（類似 <tbody>）。 |
瀏覽器支持
所有主要瀏覽器都支持 display 屬性。
注意：IE7 及更早的版本不支持 "inherit" 值。IE8 只有規(guī)定了 !DOCTYPE 才支持 "inherit"。IE9 支持 "inherit"。
提示和注釋
提示：如果元素時(shí)塊元素，它的顯示類型可通過 float 屬性改變。
實(shí)例
實(shí)例
當(dāng)點(diǎn)擊按鈕時(shí)設(shè)置元素不可見：
<html>
<head>
<script>
function displayResult()
{
document.getElementById("p1").style.display="none";
}
</script>
</head>
<body>
<p id="p1">This is some text.</p>
<input type="button" onclick="displayResult()" value="Do not display paragraph">
</body>
</html>
<head>
<script>
function displayResult()
{
document.getElementById("p1").style.display="none";
}
</script>
</head>
<body>
<p id="p1">This is some text.</p>
<input type="button" onclick="displayResult()" value="Do not display paragraph">
</body>
</html>
嘗試一下 ?
Style 對象
更多建議：