div style属性:visibility和display的区分

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

#div

本文介绍了如何使用div的visibility和display属性来实现元素的显示与隐藏。visibility仅隐藏元素但保留其占据的空间，而display则使元素完全消失，释放其所占空间。文中提供了具体的JavaScript操作示例。

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

div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白: 　　style="visibility: none;" 　　document.getElementById("typediv1").style.visibility="hidden";//隐藏　　document.getElementById("typediv1").style.visibility="visible";//显示　　通过设置display属性可以使div隐藏后释放占用的页面空间，如下　　style="display: none;" 　　document.getElementById("typediv1").style.display="none";//隐藏　　document.getElementById("typediv1").style.display="";//显示
adevotee
关注
3 html5之css新选择器和属性
u013776700的博客
09-04 367
要说css的变化那是发展比较快的，新增的选择器也很多，而且还有很多都是比较实用的。这里举出一些案例，看看你平时都是否用过。1 新增的一些写法：1.1 导入css这个是非常好的一个变化。这样可以让我们将css拆分成公共部分或者多个模块化的css,然后在需要的地方按需导入实用。1.2 变量和函数变量这个自然不用多说，大家用的可能比较多，但是大家也要注意变量的作用域问题。函数这里重点谈一下。attr函数：函数用于获取被选中元素的某个 HTML 属性值，并在样式文件中使用该值。
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 7200
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
style.display
woshixushigang的专栏
12-08 417
style.display <html><head><script language=javascript> function showclasscheck(checktype) { var objDiv = document.getElementById ("checkclass"); if (checktype==1) objDiv.style.di...
div style常用属性和实例代码
阳光梦的专栏
01-20 4403
div属性可以专门写在css文件中，也可以直接写在html中。div常用布局参数有：Width、Height、margin、padding、position、left、top、right、bottom、z-index、font、color、text-align、overflow、direction、line-height、Word-spacing、border、display、float、back
js中display
qinchaoqi的专栏
02-18 891
div1.style.display = "block"; div2.style.display = "none"; style是样式 display 是样式中的显示 "none"和"block"都是显示中的参数 none 为不显示 block为显示
DIV实现隐藏与显示
wjlgryx的专栏
05-06 388
css中display属性的参考值： display:none 此元素不会被显示。 display:block 此元素将显示为块级元素，此元素前后会带有换行符。 display:inline 默认。此元素会被显示为内联元素，元素前后没有换行符。 display:inline-block 行内块元素。（CSS2.1 新增的值） display:list-item 此元素会作为列表显示。 dis...
Html中div的显隐
末零 的博客
07-31 1201
<div> <audio controls autoplay></audio> </div> 这样一个div，想要设置它的显隐： 1、style="display:block" style="display:none" 2、style="visible:display" style="visible:hidden" 这两...
如何区分`display none`和`visibility hidden`的效果？
最新发布
12-07
`display: none` 和 `visibility: hidden` 的主要区别在于它们对元素可见性和占用空间的影响： 1. **display: none**[^1]: 当应用此样式时，元素从文档流中完全移除，就像它从未存在过一样。被隐藏的元素不仅不可见...
WEB基础之：层标签div
f_carey的博客
11-25 4850
层div1. div(division)标签1.1 align1.2 id1.3 class1.4 style1.4.1 position属性1.4.2 display属性1.4.3 display属性与visibility属性的对比2. span标签与div标签3. iframe标签 ​ 层属于网页中的块级元素，层元素中可以包含所有其他的HTML代码。层提供了一种分块控制网页内容的方法。各层之间可以彼此叠加，各层次序可以改变。 1. div(division)标签 ​ < div> 是一个
伪元素::after和::before的”前世今生“
stephenli300203的博客
03-23 372
序言 在做前端页面时，需要做一些样式上的改变，使用伪元素很轻易就做到了。之前一直说伪元素还可以清除浮动，然后就想了解一下这东西到底能干什么。如下图，之前碰到的，为元素添加边框样式，小程序中修改radio,checkbox的默认样式，都用到了伪元素。 接下来，我们详细了解一下css中的伪元素 伪元素 css3为了区分伪类和伪类元素，伪元素采用了双冒号的写法。 常见伪类::hover，:link，:...
CSS 实现div显示或隐藏的三种方法（display 和 visibility的区别）
热门推荐
单枪匹码
11-08 4万+
一、使用CSS的 display 属性来隐藏或显示div： display 属性规定元素应该 生成的框的类型，可以通过 display：none 来隐藏某一元素。 style="display: none;" document.getElementById("typediv1").style.display="none";//隐藏 document.getElementById("typediv1...
div style常用属性介绍及使用示例
weixin_44203221的博客
07-31 1411
div style常用属性介绍及使用示例
div 隐藏和显示
tyuuhgf的博客
11-11 2062
div 隐藏和显示
DIV Display属性和Visibility属性
yanzhibo的专栏IlgawME)Y*Ml
01-25 2万+
visibility属性是隐藏元素但保持元素的浮动位置，而display实际上是设置元素的浮动特征， 虽然它们都可以达到隐藏页面元素的目的，但它们的区别在于如何回应正常文档流。 visibility属性： 确定元素显示还是隐藏； visibility="visible|hidden"，visible显示，hidden隐藏。 当visibility被设置为"hidden"的
div的显示和隐藏
qq_34283987的博客
09-13 697
不占位1.隐藏，div对象.style.display = “none”; 2.显示，div对象.style.display=”block”; 示例：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css">
css控制div显示／隐藏方法及２种方…
qq353067548的专栏
04-18 2690
CSS中的display和visibility css中display和visibility语法，他们都可以隐藏和显示html元素。看齐来他们很相似，所以很多人还是会搞错。 谈们的属性分别如下： display:none|block;display:none;时隐藏该html元素，确切的说，是在浏览器中消除该元素，不占屏幕的空间。若其下有其他元素，就会上移到该空间区域（好像桌子上有100块钱，
display属性值:
wenwen_2008的专栏
10-24 3263
display属性值: none 此元素不会被显示。 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。 inline-block 行内块元素。（CSS2.1 新增的值） list-item 此元素会作为列表显示。 run-in 此元素会根据上下文作为块级元素或内联元素显示。 compact
div style 常用属性
old_man31的博客
01-14 3万+
https://wenku.baidu.com/view/471e23210722192e4536f615.html 一、常用属性： 1、Height：设置div的高度 2、Width：设置div的宽度 例如： &lt;div style="width:200px;height:200px;background-color:Black;"&gt;  我是高度，宽度测试 &lt;/div&g...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值