CSS控制DIV层显⽰和隐藏的实现⽅法
CSS中的display和visibility属性
css中display和visibility可以隐藏和显⽰html元素包括DIV层。看起来两者⾮常类似，很多⼈会搞混。下⾯分别介绍两者的属性：
display:none|block;
display:none;
隐藏该html元素，确切的说，是在浏览器中消除该元素，不占屏幕的空间。若其下有其他元素，就会上移到该空间区域（好像桌⼦上有100块钱，现在我把它放在抽屉⾥藏起来，桌⼦上放100钱的地⽅可以放在其他任何东西）。
dispaly:block;
显⽰已经隐藏的html元素，如果别的元素占有了该空间时，他将下移，空间重新别原来的元素占有。（把100块钱重新从抽屉⾥那出来放回桌⼦上）。
visibility：hidden|visible;
visibility:hidden;
隐藏该元素，正真的隐藏，但他还占有那块空间。这时，（桌⼦上有100块钱，这是我盖了桌布把他隐藏起来，钱还在那⾥）。
visibility:visible;
让元素显⽰（拿掉了桌布，看到了100块钱）。
所以display和visibility控制的分别是html元素是否存在和是否显⽰，display的属性定义该元素存在或不存在，⽽visibility的属性只是控制该元素是否显⽰出来，实际上还是存在的。
接下来⽤代码来举个例⼦，代码：
CSS Code复制内容到剪贴板
1. <html>
2. <head>
3. <script type="text/javascript">
4. function testDisplay()
5. {
6.    var divD = ElementById("testD");
7.    if(divD.style.display=="none")
8.    {
9.        divD.style.display = "block";
10.    }
11.    else
12.    {
13.        divD.style.display = "none";
14.    }
15. }
16. function testVisibility()
17. {
18.    var divV = ElementById("testV");
19.    if(divV.style.visibility =="hidden")
20.    {
21.        divV.style.visibility ="visible";
22.    }
23.    else
24.    {
25.        divV.style.visibility = "hidden";
26.    }
27. }
28. </script>
29. </head>
30. </body>
31. <div id="testD" >
32.    <div >
33.        <div >
34.        Display
35.        </div>
36.    </div>
37. </div>
38. <div id="testV" >
div border属性39.    <div >
40.        <div >
41.        Visibility
42.        </div>
43.    </div>
44. </div>
45. <input type="button" value="TestDisplay" onclick="testDisplay()"/>
46. <input type="button" value="TestVisibility" onclick="testVisibility()"/>
47. </body>
48. </html>
以上所述是⼩编给⼤家介绍的CSS控制DIV层显⽰和隐藏的实现⽅法，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。