用JavaScript隱藏控件的方法

2018-08-12 11:00 更新
當(dāng)style.display="block"或style.visibility="visible"時(shí)控件或見,當(dāng)style.display = "none"或style.visibility = "hidden"時(shí)控件不可見。
不同的是“display”不但隱藏控件,而且被隱藏的控件不再占用顯示時(shí)占用的位置,而“visibility”隱藏的控件僅僅是將控件設(shè)置成不可見了,控件仍然占俱原來的位置。 
<p> 
<input id='control' value="想要隱藏的控件"> 
</p> 
<p> 
隱藏上面的控件,并使其不占用頁面上的位置 
<input type="button" value='隱藏' onclick='displayHide_control()'> 
<input type="button" value='顯示' onclick='displayShow_control()'> 
<br /> 
僅僅隱藏控件,其位置仍然占用 
<input type="button" value='隱藏' onclick='visibilityHide_control()'> 
<input type="button" value='顯示' onclick='visibilityShow_control()'> 
</p> 
<script language="javascript" type="text/javascript"> 
function displayHide_control() 

var _control = document.getElementById("control"); 
_control.style.display="none"; 

function displayShow_control() 

var _control = document.getElementById("control"); 
_control.style.display="block"; 

function visibilityHide_control() 

var _control = document.getElementById("control"); 
_control.style.visibility="hidden"; 

function visibilityShow_control() 

var _control = document.getElementById("control"); 
_control.style.visibility="visible"; 

</script>



display:
值                    描述
none                  此元素不會(huì)被顯示。
block                 此元素將顯示為塊級(jí)元素,此元素前后會(huì)帶有換行符。
inline                默認(rèn)。此元素會(huì)被顯示為內(nèi)聯(lián)元素,元素前后沒有換行符。
inline-block          行內(nèi)塊元素。(CSS2.1 新增的值)
list-item             此元素會(huì)作為列表顯示。
run-in                此元素會(huì)根據(jù)上下文作為塊級(jí)元素或內(nèi)聯(lián)元素顯示。
compact CSS           中有值compact,不過由于缺乏廣泛支持,已經(jīng)從CSS2.1 中刪除。
marker CSS            中有值marker,不過由于缺乏廣泛支持,已經(jīng)從CSS2.1 中刪除。
table                 此元素會(huì)作為塊級(jí)表格來顯示(類似<table>),表格前后帶有換行符。
inline-table          此元素會(huì)作為內(nèi)聯(lián)表格來顯示(類似<table>),表格前后沒有換行符。
table-row-group       此元素會(huì)作為一個(gè)或多個(gè)行的分組來顯示(類似<tbody>)。
table-header-group    此元素會(huì)作為一個(gè)或多個(gè)行的分組來顯示(類似<thead>)。
table-footer-group    此元素會(huì)作為一個(gè)或多個(gè)行的分組來顯示(類似<tfoot>)。
table-row             此元素會(huì)作為一個(gè)表格行顯示(類似<tr>)。
table-column-group    此元素會(huì)作為一個(gè)或多個(gè)列的分組來顯示(類似<colgroup>)。
table-column          此元素會(huì)作為一個(gè)單元格列顯示(類似<col>)
table-cell            此元素會(huì)作為一個(gè)表格單元格顯示(類似<td> 和<th>)
table-caption         此元素會(huì)作為一個(gè)表格標(biāo)題顯示(類似<caption>)
inherit               規(guī)定應(yīng)該從父元素繼承display 屬性的值。

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)