css中display:none、visible:hidden、和jquery中的hide()的区别

最新推荐文章于 2025-06-24 10:55:52 发布
最新推荐文章于 2025-06-24 10:55:52 发布
阅读量5.4k 收藏 1
点赞数 1
CC 4.0 BY-SA版权
文章标签： html css jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Danielmumu/article/details/79323764
本文解析了CSS中display:none与visible:hidden的区别，以及jQuery中hide与show方法的工作原理。display:none使元素不可见且不占空间，而visible:hidden则保留空间但元素不可见。jQuery的hide方法实现的是display:none的效果。

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

首先这三者都是隐藏，只是有微小的差别

css中display:none是元素是否显示，通俗点就是看不见就不占位置；visible:hidden是元素能否看得见，不管看不看得见都占着那个位置。而jquery中的hide则是设者display为none，而show（）就是设置display为block，而display的作用貌似可以覆盖visible，具体还要进一步测试。

阿莯莯
关注
v-show和v-if的区别 display:none和visible: hidden的区别
qq_43944285的博客
05-09 1363
星空旅行者曦橙紫皮 2:53:23 v-show 本质就是通过设置 css 中的 display 设置为 none，控制隐藏 v-if 是动态的向 DOM 树内添加或者删除 DOM 元素 星空旅行者曦橙紫皮 2:53:42 display:none是不为隐藏的对象保留其物理空间，俗称看不见也摸不着； visible: hidden是为隐藏的对象保留其物理空间的，俗称看不见但摸得着。 ...
jsp页面 隐藏和显示内容
qq_33180812的博客
12-15 1万+
JSP Page function yincang(){ $("div a:first").css("display","none"); } function xianshi(){ $("div a:first").show(); }
jsp页面 显示和隐藏提示信息
12-04 1365
 var block = document.getElementById('block'); var hidden = document.getElementById('hidden'); block.style.display="none"; hidden.style.display="block";}            <div class="history-item-title" >数据查询&
jQuery 效果- 隐藏和显示
最新发布
likuoelie的博客
06-24 1119
toggle()方法还支持传入自定义函数，以实现更复杂的切换逻辑。证据显示，这种方式适合需要特定动画或行为的场景。示例// 隐藏元素},// 显示元素第一次点击时执行第一个函数（隐藏），第二次点击时执行第二个函数（显示），依此类推。注意：这种方法允许开发者自定义隐藏和显示的逻辑，但需要手动管理状态。hide()和show()：用于直接隐藏或显示元素，支持速度和回调参数。toggle()：用于切换元素的隐藏和显示状态，适合交互场景。css()
css hide div
挨冻的晓东
02-12 1009
New Document 最新日志1 111111111111111111 最新日志2 222222222222222 test test 最新日志3 3333333333...
关于css中的display="none" 和jq中的hide()
lingyu2333的博客
03-30 3212
今天在使用webupload插件的时候发现出现了问题。因为想做到动态显示，就选择了先把<div id="picker">选择文件</div>的css 设定为display= "none";后来发现原来设定为display=“none”，就是不渲染，在页面加载完成之后并不把display = “none”的div容器渲染出来，这时候的div容器对js语句中的选择器是不可见的，...
jQuery的中 is(‘:visible’) 解析及用法(必看)
12-12
`:visible`选择器的基本原理是检查元素的CSS属性，如`display`和`visibility`，以及其尺寸和父元素的状态，来确定元素是否可见。以下是一些使元素被视为不可见的情况： 1. **设置为 `display:none`**：当一个元素的...
jQuery的中 is(':visible') 解析及用法(必看)
10-20
其中，is(':visible') 方法是 jQuery 中用于检测元素可见性的函数，它的用法和应用对于初学者和有经验的开发者来说都是相当重要的。通过了解这个方法的细节，开发者可以更加精确地控制页面上的元素展现。 ### is(':...
html selectpicker组件如何隐藏和显示？为什么不能用css display:none？
04-28
3.使用CSS设置selectpicker的visibility属性为“hidden”或“visible”。 不能使用CSS display属性来隐藏selectpicker组件，因为selectpicker组件是由JavaScript生成的，而不是直接在HTML中定义的元素。如果您使用...
CSS选择器和jQuery选择器
01-31
CSS选择器和jQuery选择器都是前端开发中不可或缺的工具。正确理解并熟练掌握它们可以帮助开发者创建美观且交互性强的Web应用程序。随着Web技术的发展，选择器也在不断进化和完善，因此持续学习最新的选择器特性是...
jQuery的显示和隐藏方法与css隐藏的样式对比
12-04
首先，让我们理解 `display:none` 和 `visible:hidden` 在 CSS 中的用法和区别： 1. `display:none`： 当设置一个元素的 `display` 属性为 `none` 时，该元素将完全从页面布局中移除，不仅在视觉上不可见，而且...
jquery技巧-控制div的显示与隐藏
06-18 1083
$("#id").show()表示display:block, $("#id").hide()表示display:none; $("#id").toggle()切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
CSS中的disable，hidden，readonly
aaa2008159的博客
05-16 313
项目中有时候需要对某个input进行隐藏或者禁止修改等。 需要隐藏某个input的时候就用hidden <input hidden="true" > 如果要禁止修改input的value则需要用disable或者readonly. <input readonly="true" > <input disable="true" &gt...
display:none和visible:hidden区别
allen88的专栏
05-08 1365
3、例如有三个table，将中间的一个table hidden掉，你会发现在那个被hidden的table看不见了，但是，中间会留有很大的一空白，而这个空白就是这个table没有被隐藏时所占的位置。●visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。1、visibility: hidden----将元素隐藏，但是在网页中该占的位置还是占着。2、display: none----将元素的显示设为无，即在网页中不占任何的位置。
js显示隐藏 display visibility以及jquery里的show hide的区别
m0_62360527的博客
05-31 1498
js显示隐藏 display visibility以及jquery里的show hide的区别
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...
jquery隐藏显示元素：$('#id').css('display','none');$('#id').hide();
kungfu_panda的专栏
08-14 3万+
方法一： $('#id').css('display','none'); $('#id').css('display','block'); 方法二： $('#id').hide(); $('#id').show();
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值