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拷贝內容到剪贴板
- <html>
- <head>
- <script type="text/javascript">
- function testDisplay()
- {
- var divD = document.getElementById("testD");
- if(divD.style.display=="none")
- {
- divD.style.display = "block";
- }
- else
- {
- divD.style.display = "none";
- }
- }
- function testVisibility()
- {
- var divV = document.getElementById("testV");
- if(divV.style.visibility =="hidden")
- {
- divV.style.visibility ="visible";
- }
- else
- {
- divV.style.visibility = "hidden";
- }
- }
- </script>
- </head>
- </body>
- <div id="testD" style="border:#ddd 1px solid">
- <div style="display:block;border:#ccc 2px solid">
- <div style="visibility:visible;border:#aaa 2px solid">
- Display
- </div>
- </div>
- </div>
- <div id="testV" style="border:#ddd 1px solid">
- <div style="display:block;border:#ccc 2px solid">
- <div style="visibility:visible;border:#aaa 2px solid">
- Visibility
- </div>
- </div>
- </div>
- <input type="button" value="TestDisplay" onclick="testDisplay()"/>
- <input type="button" value="TestVisibility" onclick="testVisibility()"/>
- </body>
- </html>
以上所述是网编给大伙儿详细介绍的CSS操纵DIV层显示信息和掩藏的完成方式，期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！
