| 标题 | 通过display或visibility来隐藏html元素 |
| 范文 | 有些时候我们需要根据某些条件来控制web页面中的html元素显示还是隐藏，可以通过display或visibility来实现。通过下面的例子了解display和visibility的区别，简单的例子代码如下： 代码如下: <html> <head> <title>html元素的显示与隐藏控制</title> <script type=text/javascript> function showandhidden1(){ var div1=document.getelementbyid(div1); var div2=document.getelementbyid(div2); if(div1.style.display=='block') div1.style.display='none'; else div1.style.display='block'; if(div2.style.display=='block') div2.style.display='none'; else div2.style.display='block'; } function showandhidden2(){ var div3=document.getelementbyid(div3); var div4=document.getelementbyid(div4); if(div3.style.visibility=='visible') div3.style.visibility='hidden'; else div3.style.visibility='visible'; if(div4.style.visibility=='visible') div4.style.visibility='hidden'; else div4.style.visibility='visible'; } </script> </head> <body> <div>display：元素的位置不被占用</div> <div id=div1 style=display:block;>div 1</div> <div id=div2 style=display:none;>div 2</div> <input type=button onclick=showandhidden1(); value=div切换 /> <hr> <div>visibility：元素的位置仍被占用</div> <div id=div3 style=visibility:visible;>div 3</div> <div id=div4 style=visibility:hidden;>div 4</div> <input type=button onclick=showandhidden2(); value=div切换 /> </body> </html> |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。