display与visibility

来源：互联网发布：linux文件管理命令编辑：程序博客网时间：2024/06/04 17:54

用JavaScript隐藏控件的方法有两种，分别是通过设置控件的style的“display”和“visibility”属性。当style.display="block"或style.visibility="visible"时控件或见，当style.display="none"或style.visibility="hidden"时控件不可见。不同的是“display”不但隐藏控件，而且被隐藏的控件不再占用显示时占用的位置，而“visibility”隐藏的控件仅仅是将控件设置成不可见了，控件仍然占俱原来的位置。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
<script language="JavaScript">
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>
</head>
<body>
   <P onclick="displayHideUI();">displayHideUI</p>
   <P onclick="displayShowUI();">displayShowUI</p>
   <P onclick="visibilityHideUI();">visibilityHideUI</p>
   <P onclick="visibilityShowUI();">visibilityShowUI</p>
        <div value="0" id="bbs">Select an Employee
           <P>元素</p>
       </div>
       <P>控制之外的元素</p>
</body>

</html>

原文地址http://www.cnblogs.com/mingforyou/archive/2012/09/05/2672373.html

0 0