css隐藏div(CSS控制DIV层显示和隐藏的实现方法)
类别:Web前端 浏览量:650
时间:2022-01-21 00:12:36 css隐藏div
CSS控制DIV层显示和隐藏的实现方法CSS中的display和visibility属性
css中display和visibility可以隐藏和显示html元素包括li层。看起来两者非常类似,很多人会搞混。下面分别介绍两者的属性:
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的属性只是控制该元素是否显示出来,实际上还是存在的。
接下来用代码来举个例子,代码:
- <html>
- <head>
- <script type="text/javascript">
- function testDisplay()
- {
- var liD = document.getElementById("testD");
- if(liD.style.display=="none")
- {
- liD.style.display = "block";
- }
- else
- {
- liD.style.display = "none";
- }
- }
- function testVisibility()
- {
- var liV = document.getElementById("testV");
- if(liV.style.visibility =="hidden")
- {
- liV.style.visibility ="visible";
- }
- else
- {
- liV.style.visibility = "hidden";
- }
- }
- </script>
- </head>
- </body>
- <li id="testD" style="border:#ddd 1px solid">
- <li style="display:block;border:#ccc 2px solid">
- <li style="visibility:visible;border:#aaa 2px solid">
- Display
- </li>
- </li>
- </li>
- <li id="testV" style="border:#ddd 1px solid">
- <li style="display:block;border:#ccc 2px solid">
- <li style="visibility:visible;border:#aaa 2px solid">
- Visibility
- </li>
- </li>
- </li>
- <input type="button" value="TestDisplay" onclick="testDisplay()"/>
- <input type="button" value="TestVisibility" onclick="testVisibility()"/>
- </body>
- </html>
以上所述是小编给大家介绍的CSS控制li层显示和隐藏的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持!
您可能感兴趣
- python实现简单加密(Python 隐藏输入密码时屏幕回显的实例)
- html5隐藏数字(HTML5去掉输入框type为number时的上下箭头的实现方法)
- jquery隐藏动画教程(jquery插件实现鼠标隐藏)
- 如何获取gridview隐藏列的值
- mysql8.0关键字段使用(MySQL 8.0新特性之隐藏字段的深入讲解)
- css设置隐藏左右边框(CSS 实现元素较宽不能被完全展示时将其隐藏的方法)
- php框架laravel使用(laravel5环境隐藏index.php后缀apache的方法)
- unix进程空间的区段(Unix/Linux fork隐藏的开销)
- css隐藏div(CSS控制DIV层显示和隐藏的实现方法)
- access区分登录身份的代码(妙用.htaccess隐藏网页文件扩展名)
- js隐藏显示tr
- css不显示滚动条设置(css隐藏移动端滚动条并且ios上平滑滚动的方法)
- phplaravel开发规范(Laravel解决nesting level错误和隐藏index.php的问题)
- 微信html隐藏功能(使用Html5多媒体实现微信语音功能)
- php nginx 底层执行流程(nginx/apache/php隐藏http头部版本信息的实现方法)
- webapp隐藏地址栏
- 8月23日11时16分将迎处暑,逐渐进入气象意义上的秋天(8月23日11时16分将迎处暑)
- 花不语 下 如果重来一次的话,你还会这么选择吗(花不语下如果重来一次的话)
- 城市记忆之上海 最难忘的是老弄堂里的市井味道(城市记忆之上海)
- 太鸡贼了,这老小区轻松搞定了停车问题(这老小区轻松搞定了停车问题)
- 太鸡贼了,这老小区轻松搞定了停车问题(这老小区轻松搞定了停车问题)
- 节日我在岗|警景相融 平安相伴(节日我在岗警景相融)
热门推荐
- python udp网络编程(python实现一个简单的udp通信的示例代码)
- django后台运行命令(Django框架实现的普通登录案例使用POST方法)
- ASP.NET压缩图片
- pythonflask怎么设置(python flask安装和命令详解)
- windowsmysql服务在哪里(解决windows service 2012阿里云服务器在搭建mysql时缺少msvcr100.dll文件的问题)
- HttpModule的作用
- php网页采集教程交流(PHP实现的抓取小说网站内容功能示例)
- jquerycss3轮播案例(CSS3实现列表无限滚动/轮播效果)
- python 的常用工具(Python静态类型检查新工具之pyright 使用指南)
- html导航条下拉菜单代码(Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9