用JavaScript隱藏控件的方法
更新時(shí)間：2009年09月21日 19:43:08 作者：
用JavaScript隱藏控件的方法有兩種，分別是通過設(shè)置控件的style的“display”和“visibility”屬性。
當(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>
隱藏上面的控件，并使其不占用頁(yè)面上的位置
<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”不但隱藏控件，而且被隱藏的控件不再占用顯示時(shí)占用的位置，而“visibility”隱藏的控件僅僅是將控件設(shè)置成不可見了，控件仍然占俱原來的位置。
<p>
<input id='control' value="想要隱藏的控件">
</p>
<p>
隱藏上面的控件，并使其不占用頁(yè)面上的位置
<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>
相關(guān)文章
tbody元素支持嵌套的注意方法...2007-03-03
JavaScript實(shí)現(xiàn)可動(dòng)的canvas環(huán)形進(jìn)度條
這篇文章主要介紹了如何利用JavaScript canvas繪制一個(gè)可以動(dòng)的環(huán)形進(jìn)度條。文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以動(dòng)手試一試2022-02-02
這篇文章主要介紹了JointJS JavaScript流程圖繪制框架解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
微信小程序調(diào)用騰訊地圖API文檔JavaScript?SDK和WebService?API詳細(xì)解讀
本文介紹了如何使用騰訊位置服務(wù),包括申請(qǐng)開發(fā)者密鑰、獲取小程序APPID、下載地圖SDK、設(shè)置服務(wù)器域名白名單等步驟,詳細(xì)說明了如何在微信小程序中集成騰訊位置服務(wù),進(jìn)行地圖展示和周邊搜索等功能的實(shí)現(xiàn),同時(shí)提醒注意API的調(diào)用次數(shù)和權(quán)限限制,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了JS函數(shù)基本定義與用法,結(jié)合實(shí)例形式分析了JavaScript函數(shù)基本定義、參數(shù)、返回值等相關(guān)使用技巧,需要的朋友可以參考下2020-01-01
echarts圖表設(shè)置寬度100%結(jié)果為100px的解決辦法
在開發(fā)一個(gè)前端項(xiàng)目時(shí)需要用到Element-ui的el-tabs組件和Echart開源庫(kù),當(dāng)兩者嵌套使用時(shí),我給Echart中的圖表寬度設(shè)置為了100%,但是實(shí)際的寬度卻只有100px,這篇文章主要給大家介紹了關(guān)于echarts圖表設(shè)置寬度100%結(jié)果為100px的解決辦法,需要的朋友可以參考下2022-12-12
靜態(tài)頁(yè)面下用javascript操作ACCESS數(shù)據(jù)庫(kù)(讀增改刪)的代碼
[紅色]靜態(tài)頁(yè)面下用javascript操作ACCESS數(shù)據(jù)庫(kù)(讀增改刪)的代碼...2007-05-05
這篇文章主要給大家介紹了關(guān)于微信小程序使用Vant Weapp組件庫(kù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
最近在用uniapp開發(fā)的時(shí)候遇到了一些問題,下面這篇文章主要給大家介紹了關(guān)于uniapp獲取底部安全距離以及狀態(tài)欄高度等的相關(guān)資料,需要的朋友可以參考下2022-10-10
圍繞表單的可訪問性與交互性上，各瀏覽器都下了很大工夫，比如fieldset與legend等用于增強(qiáng)區(qū)域感的元素，for，accessKey，defaultValue，maxlength，tabIndex等用于交互或提示的屬性。不過，今天只講tabIndex。2009-12-12