控制HTML页面div中的某些元素隐藏小结

最新推荐文章于 2024-10-19 18:17:00 发布
原创 最新推荐文章于 2024-10-19 18:17:00 发布 · 2.4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何使用CSS的visibility和display属性来控制div元素的显示与隐藏状态，并详细解释了这两种方式的区别：visibility仅隐藏元素但保留其占位，而display则完全移除元素使其不占据页面空间。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白:

 

1

2

3

    style="visibility: none;"写博客

　　document.getElementById("typediv1").style.visibility="hidden";//隐藏

　　document.getElementById("typediv1").style.visibility="visible";//显示

　　　　

　　通过设置display属性可以使div隐藏后释放占用的页面空间，如下

　　

1

2

3

    style="display: none;"

　　document.getElementById("typediv1").style.display="none";//隐藏

　　document.getElementById("typediv1").style.display="";//显

html 元素在可视区域,如何判断元素是否在可视区域ViewPort
weixin_31510897的博客
06-15 1673
个性签名: 生如夏花，逝如冬雪；人生如此，何悔何怨。前言: 经常需要计算元素的大小或者所在页面的位置,offsetWidth，clientWidth，scrollWidth,scrollTop这几个关键字的出现更是家常便饭，每次碰到都需要事先实验一番。为了下次开发提高效率。在这里一次性做个总结，以用来判断元素是否在可视区域以及用原生js简单实现懒加载。文末有个简单的懒加载实现的demo，有需要的可...
div 隐藏和显示
tyuuhgf的博客
11-11 2062
div 隐藏和显示
div的visibility和display属性区别
我的世界我的梦
07-02 1692
div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白:　　style="visibility: none;"　　document.getElementById("typediv1").style.visibility="hidden";//隐藏　　document.getElementById("typediv1").style.visibility="vis
display:none与visible:hidden的区别
JorgenXu
09-06 634
http://www.cnblogs.com/nicholas_f/archive/2009/03/27/1423207.html     display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别: display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。 visible:hidden-
display:none
热门推荐
进击的Coder菜鸟
08-21 11万+
1、display:none和visible:hidden都能把网页上某个元素隐藏起来。 2、但两者有区别: ●display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。 ●visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。 1、visibility: hid...
div visibility和display
yanzhibo的专栏IlgawME)Y*Ml
01-26 807
visibility属性是隐藏元素但保持元素的浮动位置，而display实际上是设置元素的浮动特征， 虽然它们都可以达到隐藏页面元素的目的，但它们的区别在于如何回应正常文档流。 DIV中display和visibility属性差别 visibility属性： 确定元素显示还是隐藏； visibility="visible|hidden"，visible显示，hidden隐
显示/隐藏DIV的visibility与display的差别
weixin_56800842的博客
03-02 300
div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白: 　　style="visibility: none;" 　　document.getElementById("typediv1").style.visibility="hidden";//隐藏 　　document.getElementById("typediv1").style.visibility="visible";//显示 　　通过设置display属性可以使div隐藏后释放占用的页面空间，如下 　　st
DIV和CSS排版中制作细线条的方法小结
10-30
### DIV和CSS排版中制作细线条的方法小结 在网页设计与开发过程中，经常会遇到需要制作细线条的情况，这些细线条通常用于分隔不同的内容区块或者作为视觉元素的一部分。然而，在实现过程中可能会遇到浏览器兼容性...
ASPnet（C#）中的DIV的显示隐藏问题
10-19
本文将深入探讨如何在ASP.NET中利用C#来实现DIV元素的显示与隐藏，并通过实际代码示例进行说明。 #### 一、为什么使用Panel而非DIV？ 在ASP.NET中，默认情况下并不支持直接操作HTML的`<div>`标签的可见性属性。这...
Boostrap模态窗口的学习小结
11-23
例如，用户在模态框内的某些元素上悬浮时，可以显示Tooltip提供额外信息；点击某个按钮后，可能会弹出一个Popover显示更详细的说明。 总的来说，Bootstrap的模态窗口是一个强大的设计工具，能够帮助开发者轻松创建...
《web结课作业的源码》中华传统文化题材网页设计主题——基于HTML+CSS+JavaScript精美自适应绿色茶叶公司
08-09
- **hover效果**: 当鼠标悬停在某些元素上时触发特定样式变化，如改变颜色、显示隐藏内容等，提升用户体验。 #### 2. 页面结构与交互 - **页头、菜单导航、内容区、页脚**: 分别对应网站的头部、导航菜单、主要内容...
<div>的display属性和visibility属性
Flora的博客
11-14 1万+
1、display属性 display属性常用来设置<div>元素的浮动特征，当display设置为block（块）时，容器中所有元素都将被当做一个单独的块放入到页面中；将display设置为inline，将使其行为和元素inline一样，即使他是普通的块元素，它也将会被组合成像<span>那样的输出流输出到页面上；将display设置为none，则该元素实际上就从页面中被移走，它下面的所有元素都会
div的display和visible的区别
tigerxingqitian的专栏
08-03 6413
<br />呵呵 不好意思啊 昨天刚搬了新家 下午所以就没有写<br />这几天都是在弄原型  感觉挺费力的  估计大家所说的业务逻辑错误 一般都是不理解概念吧  我想大概是这么一回事<br />昨天弄了隐藏和显示的效果  主要是用到了div的两个属性  那就是display和visible 估计大家在被面试的时候会被问到  它们主要都是用来控制div的显示与隐藏  但是一般都比较喜欢问的问题是它们两者有什么区别<br />visible是显示  不管有没有看出来 它都是存在的  都会占用空间  而disp
【JQuery】初级学习（上）
爱科比的博客
09-25 246
Query是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQ...
CSS 中的content-visibility属性
最新发布
读心悦
10-19 734
是 CSS 中一个相对较新的属性，它旨在提高大型文档或复杂网页的渲染性能。这个属性允许浏览器延迟对页面某些部分的渲染，直到它们真正需要被显示或交互时。这对于包含大量内容或复杂布局的网页特别有用，因为它可以减少初始渲染时间和内存使用。
两种div隐藏和显示方式的区别visibility和display
HaiXingCha的博客
04-17 578
一.方式1：隐藏后仍占有页面空间，显示空白div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白(占用页面空间)style="visibility: none;"document.getElementById("typediv1").style.visibility="hidden";//隐藏 document.getElementById("typediv1").style
DIV中display和visibility属性差别
weixin_33804582的博客
02-13 184
DIV中display和visibility属性差别 DIV中display和visibility属性差别还是挺大的,虽然Visibility和Display属性都可以达到隐藏页面元素的目的，但它们的区别在于如何回应正常文档流 本节向大家描述一下DIV中display和visibility的差别，visibility属性是隐藏元素但保持元素的浮动位置，而display实际上是设...
DIV Display属性和Visibility属性
yanzhibo的专栏IlgawME)Y*Ml
01-25 2万+
visibility属性是隐藏元素但保持元素的浮动位置，而display实际上是设置元素的浮动特征， 虽然它们都可以达到隐藏页面元素的目的，但它们的区别在于如何回应正常文档流。 visibility属性： 确定元素显示还是隐藏； visibility="visible|hidden"，visible显示，hidden隐藏。 当visibility被设置为"hidden"的
HTML5中div、article、section元素语义及使用详解
div是最基础的元素，起初在HTML中并无特定含义，主要用来布局和应用CSS样式，或者作为JavaScript操作的对象。div标签的使用非常灵活，但缺乏语义，适用于通用的容器划分。 section元素则引入了更强的语义性，它表示...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值