CSS如何控制DIV层实现显示和隐藏

最新推荐文章于 2023-09-14 18:51:30 发布
最新推荐文章于 2023-09-14 18:51:30 发布
阅读量411 收藏 1
点赞数 1
分类专栏： 编程语言 CSS 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hdxx2022/article/details/132061448
版权
编程语言 同时被 2 个专栏收录
1065 篇文章 6 订阅
订阅专栏
CSS
100 篇文章 2 订阅
订阅专栏

 

本文给大家带来了CSS控制DIV层显示和隐藏的方法，是前端学习必须要掌握的基础知识，非常不错，具有参考借鉴价值，感兴趣的小伙伴一起学习吧

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" οnclick="testDisplay()"/>   
  46. <input type="button" value="TestVisibility" οnclick="testVisibility()"/>   
  47. </body>   
  48. </html>  

以上所述是小编给大家介绍的CSS控制DIV层显示和隐藏的实现方法，希望对大家有所帮助。

转自：微点阅读   https://www.weidianyuedu.com

hdxx2022
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS控制DIV层显示和隐藏的实现方法
09-27
本文给大家带来了CSS控制DIV层显示和隐藏的方法，是前端学习必须要掌握的基础知识，非常不错，具有参考借鉴价值，感兴趣的小伙伴一起学习吧
前端设置div的显示与隐藏
weixin_43041350的博客
01-09 3871
div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白。通过设置display属性可以使div隐藏后释放占用的页面空间。
div 隐藏和显示
tyuuhgf的博客
11-11 1723
div 隐藏和显示
JQuery隐藏和显示div元素的三种方法
最新发布
许三金的博客
09-14 3303
toggle() 方法在被选元素上进行 hide() 和 show() 之间的切换。hide() 方法隐藏被选元素。show() 方法显示隐藏的被选元素。该方法检查被选元素的可见状态。如果一个元素是隐藏的，则运行 show()，如果一个元素是可见的，则运行 hide() - 这会造成一种隐藏和显示状态切换的效果。;;
原生js与jQuery显示隐藏div的几种方法
jakelihua
02-19 4099
简介：本文将会讲解，如何使用原生的JS和jquery来实现对于这个div盒子的隐藏。
style.display
woshixushigang的专栏
12-08 347
style.display &lt;html&gt;&lt;head&gt;&lt;script language=javascript&gt; function showclasscheck(checktype) { var objDiv = document.getElementById ("checkclass"); if (checktype==1) objDiv.style.di...
JQuery&CSS;&CSS;+DIV实例大全.rar
08-13
4.jQuery实现支付宝隐藏层提示信息内容的功能 5.jquery实现鼠标划过网址名称显示网站截图功能 6.jQuery带Tips动画提示通用表单验证插件下载(jquery validate),动画效果漂亮 7.jQuery鼠标移到下载地址滑出气泡...
100多个JQuery效果示例（实例）div+css+javascrpit
04-09
4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. jquery...
css入门笔记
05-15
1.css的概述 1.问题 HTML属性修饰有一定局限，是不太便捷 2.css的语法规范 1.使用css样式方式 1.内联样式 行内样式 特点：将css样式定义在HTML标记中 语法： 样式声明：用样式属性和值组成（属性:值;） ...
js中display
qinchaoqi的专栏
02-18 822
div1.style.display = "block"; div2.style.display = "none"; style是样式 display 是样式中的显示 "none"和"block"都是显示中的参数 none 为不显示 block为显示
css实现点击一个控件控制div的显示和隐藏
cxh20777的专栏
04-13 2039
HTML中`for`属性通常与`label`元素一起使用，用于指定`label`元素控制的表单元素。它的值是要关联的表单控件的`id`属性的值，以便用户可以通过点击`label`标签来触发相应的表单控制元素。使用`for`属性可增强表单控件的可用性和可访问性，尤其是对于视觉障碍用户，因为它使得标签可以更容易地与其关联的表单控件进行互动，而不需要精确定位或点击相应的控件。当用户点击`label`元素时，浏览器会将焦点转移到`id`属性为“username”的文本输入框。
点击按钮控制div隐藏和显示
weixin_41595613的博客
11-23 4589
要求：有一个按钮，点击按钮使得div消失，之后将按钮文字改变为显示，再次点击按钮使得div出现，依次类推
两种div隐藏和显示方式的区别visibility和display
HaiXingCha的博客
04-17 506
一.方式1：隐藏后仍占有页面空间，显示空白div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白(占用页面空间)style="visibility: none;"document.getElementById("typediv1").style.visibility="hidden";//隐藏 document.getElementById("typediv1").style
JS 控制div的可见和隐藏 display
weixin_50784508的博客
06-11 1600
【代码】JS 控制div的可见和隐藏 display。
点击事件div的隐藏和显示
wen0627的博客
02-23 9590
按照图片步骤来做 1、先设置文字隐藏和显示。 2、在设置div和类。 3、设置完样式之后设置css的div。 4、上面的的设置隐藏和显示的div的宽和高and颜色。 5、设置js样式，第一设置隐藏和显示。 6、第二获取div的ld设置。 7、第一个点击事件是隐藏，第二个是显示的点击样式。 这是我所学到的点击事件div的隐藏和显示，分享给你们，希望可以帮，助到你们。 以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区...
div的显示和隐藏
qq_34283987的博客
09-13 567
不占位1.隐藏，div对象.style.display = “none”; 2.显示，div对象.style.display=”block”; 示例：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css">
div 隐藏和显示方式
随心更博
07-08 1万+
在js中可以使用两种方式控制div的显示和隐藏，都能够实现显示和隐藏，但是又有所不同； 一.方式1：隐藏后仍占有页面空间，显示空白     div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白     style="visibility: none;"      //在Div中设置style属性     document.getElementById(
CSS 实现div显示或隐藏的三种方法（display 和 visibility的区别）
热门推荐
单枪匹码
11-08 2万+
一、使用CSS的 display 属性来隐藏或显示div： display 属性规定元素应该 生成的框的类型，可以通过 display：none 来隐藏某一元素。 style="display: none;" document.getElementById("typediv1").style.display="none";//隐藏 document.getElementById("typediv1...
css-表格鼠标hover时图标的隐藏与展示
xxuxioxx的博客
07-28 634
鼠标hover时图标的隐藏与展示
鼠标悬浮显示div，显示在上一层
03-24
的方法是什么？ 可以使用CSS的z-index属性来控制div的层级，将需要显示在上一层的div的z-index值设置为比其他div更高的值即可。同时，使用JavaScript的onmouseover和onmouseout事件来控制鼠标悬浮时div的显示和隐藏。具体实现方法可以参考以下代码： HTML代码： <div class="hover-div">鼠标悬浮时显示的内容</div> <div class="other-div">其他内容</div> CSS代码： .hover-div { position: absolute; display: none; z-index: 999; } .other-div { position: relative; z-index: 1; } JavaScript代码： var hoverDiv = document.querySelector('.hover-div'); var otherDiv = document.querySelector('.other-div'); otherDiv.onmouseover = function() { hoverDiv.style.display = 'block'; } otherDiv.onmouseout = function() { hoverDiv.style.display = 'none'; }

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值