关闭

可折疊區域(js高級程序設計,第10章-高級DOM技術)

标签: borderdivfunctionhtmlcss
732人阅读 评论(0) 收藏 举报
分类:

<html>
 <head>
 <title>Style Example</title>
 
 <script>
  function toggle(sDivId){
   var oDiv=document.getElementById(sDivId);
   oDiv.style.display=(oDiv.style.display=="none")?"block":"none";
  }
 </script>
 </head>
 <body>
  <div style="background-color:blue;color:white;font-weight:bold;padding:10px;cursor:pointer"
  onclick="toggle('divContent1')">click here</div>
  <div style="border:3px solid blue;height:100px;padding:10px" id="divContent1">This is some content to show and hide.</div>
  <p>&nbsp;</p>
  <div style="background-color:blue;color:white;font-weight:bold;padding:10px;cursor:pointer"
  onclick="toggle('divContent2')">Click Here</div>
  <div style="border:3px solid blue;height:100px;padding:10px" id="divContent2">This is some content to show and hide</div>
 </body>
</html> 

display:none

CSS1 隐藏对象。与 visibility 属性的hidden值不同,其不为被隐藏的对象保留其物理空间

visibility:hidden

对象隐藏,与 display 属性不同,此属性为隐藏的对象保留其占据的物理空间。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:180175次
    • 积分:1547
    • 等级:
    • 排名:千里之外
    • 原创:28篇
    • 转载:24篇
    • 译文:0篇
    • 评论:18条
    文章分类