js將控制項隱藏的方法及display屬性介紹

來源:互聯網
上載者:User

用JavaScript隱藏控制項的方法有兩種,分別是通過設定控制項的style的“display”和“visibility”屬性。當 style.display="block"或style.visibility="visible"時控制項或見,當 style.display="none"或style.visibility="hidden"時控制項不可見。不同的是“display”不但隱藏控 件,而且被隱藏的控制項不再佔用顯示時佔用的位置,而“visibility”隱藏的控制項僅僅是將控制項設定成不可見了,控制項仍然占俱原來的位置。
 

複製代碼 代碼如下:
function displayHideUI()
{
     var ui = document.getElementById("bbs");
     ui.style.display="none";
}
function displayShowUI()
{
     var ui = document.getElementById("bbs");
     ui.style.display=" ";//display為空白的話會好使,為block會使後邊的空間換行
}
function visibilityHideUI()
{
     var ui = document.getElementById("bbs");
     ui.style.visibility="hidden";
}
function visibilityShowUI()
{
     var ui = document.getElementById("bbs");
     ui.style.visibility="visible";
}
</script>


display:
值                    描述
none                  此元素不會被顯示。
block                 此元素將顯示為區塊層級元素,此元素前後會帶有分行符號。
inline                預設。此元素會被顯示為內嵌元素,元素前後沒有分行符號。
inline-block          行內塊元素。(CSS2.1 新增的值)
list-item             此元素會作為列表顯示。
run-in                此元素會根據上下文作為區塊層級元素或內嵌元素顯示。
compact CSS           中有值compact,不過由於缺乏廣泛支援,已經從CSS2.1 中刪除。
marker CSS            中有值marker,不過由於缺乏廣泛支援,已經從CSS2.1 中刪除。
table                 此元素會作為塊級表格來顯示(類似<table>),表格前後帶有分行符號。
inline-table          此元素會作為內聯表格來顯示(類似<table>),表格前後沒有分行符號。
table-row-group       此元素會作為一個或多個行的分組來顯示(類似<tbody>)。
table-header-group    此元素會作為一個或多個行的分組來顯示(類似<thead>)。
table-footer-group    此元素會作為一個或多個行的分組來顯示(類似<tfoot>)。
table-row             此元素會作為一個表格行顯示(類似<tr>)。
table-column-group    此元素會作為一個或多個列的分組來顯示(類似<colgroup>)。
table-column          此元素會作為一個儲存格列顯示(類似<col>)
table-cell            此元素會作為一個表格儲存格顯示(類似<td> 和<th>)
table-caption         此元素會作為一個表格標題顯示(類似<caption>)
inherit               規定應該從父元素繼承display 屬性的值。

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。