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层显示和隐藏的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持!
您可能感兴趣
- jquery隐藏动画教程(jquery插件实现鼠标隐藏)
- css不显示滚动条设置(css隐藏移动端滚动条并且ios上平滑滚动的方法)
- jquery的动画效果api(jQuery框架实现元素显示及隐藏三种动画方式)
- html5隐藏数字(HTML5去掉输入框type为number时的上下箭头的实现方法)
- css设置隐藏左右边框(CSS 实现元素较宽不能被完全展示时将其隐藏的方法)
- access区分登录身份的代码(妙用.htaccess隐藏网页文件扩展名)
- php框架laravel使用(laravel5环境隐藏index.php后缀apache的方法)
- php nginx 底层执行流程(nginx/apache/php隐藏http头部版本信息的实现方法)
- laravel数据绑定(laravel-admin表单提交隐藏一些数据,回调时获取数据的方法)
- jquery判断是否显示或隐藏
- mysql8.0关键字段使用(MySQL 8.0新特性之隐藏字段的深入讲解)
- unix进程空间的区段(Unix/Linux fork隐藏的开销)
- js隐藏显示tr
- python实现简单加密(Python 隐藏输入密码时屏幕回显的实例)
- 微信html隐藏功能(使用Html5多媒体实现微信语音功能)
- phplaravel开发规范(Laravel解决nesting level错误和隐藏index.php的问题)
- 吉林神秘传染链跨省 传染源尚未找到,舒兰 封城(吉林神秘传染链跨省)
- 吉林舒兰 封城 聚集性疫情传播链已延至沈阳,有一个细节让人忧心(吉林舒兰封城)
- 1天密接者猛增77人,患者轨迹透露危险信号 吉林市全面封闭管理(1天密接者猛增77人)
- 吉林舒兰 封城 15人确诊 276人隔离,出现跨省传播(吉林舒兰封城)
- 四月新番CP人气榜公布,《剃须》两度上榜,沙优不是女朋友(四月新番CP人气榜公布)
- 2019年外媒秋季新番动画角色CP排行榜,桐人和爱丽丝落榜(2019年外媒秋季新番动画角色CP排行榜)
热门推荐
- php字符串长度怎么获取(PHP实现给定一列字符,生成指定长度的所有可能组合示例)
- 阿里云网站cdn加速(阿里云CDN刷新链接接口实践)
- HTTP状态码的意思
- html如何设置图片高度和宽度(HTML如何让IMG自动适应DIV容器大小的实现方法)
- php生成md5(php进行md5加密简单实例方法)
- sql语句groupby分组后怎么显示(SQL group by去重复且按照其他字段排序的操作)
- python使用教程操作(详解python中@的用法)
- JavaScript命名空间
- python模块使用方法(详解python的argpare和click模块小结)
- 最新版mysql 安装教程(新手如何安装Mysql亲测有效)