CSS操纵DIV层显示信息和掩藏的完成方式

日期:2021-03-18 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

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 = document.getElementById("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 = document.getElementById("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" style="border:#ddd 1px solid">   
  32.     <div style="display:block;border:#ccc 2px solid">   
  33.         <div style="visibility:visible;border:#aaa 2px solid">   
  34.         Display   
  35.         </div>   
  36.     </div>   
  37. </div>   
  38. <div id="testV" style="border:#ddd 1px solid">   
  39.     <div style="display:block;border:#ccc 2px solid">   
  40.         <div style="visibility:visible;border:#aaa 2px solid">   
  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层显示信息和掩藏的完成方式,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!