JS和jQuery显示隐藏div的方法

最新推荐文章于 2024-10-28 17:03:21 发布

Tachypsychia

最新推荐文章于 2024-10-28 17:03:21 发布

阅读量904

点赞数 5

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript jquery 开发语言

本文链接：https://blog.youkuaiyun.com/INNER_PEACE_DS/article/details/136497048

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在JavaScript和jQuery中使用display和visibility属性以及相关方法（如attr(),css(),hide(),show()）来控制<div>元素的显示与隐藏，强调了不同方式下元素占用空间和事件响应性的区别。

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

1.当前div内容

假设当前div内容如下：

<div id="testId">测试内容</div>

2.js显示隐藏的方法

2.1.方式1：设置display属性

设置display属性为隐藏，可以使div释放占用的页面空间。使用该方式隐藏，会使div里面内容休眠，事件不再响应。

#css设置：
style="display: none;"

#js设置：
#隐藏
document.getElementById("testId").style.display="none";
#显示
document.getElementById("testId").style.display="";

2.2.方式2：设置visibility属性

设置visibility属性为隐藏，隐藏后页面显示空白，还占用空间。

#css设置
style="visibility: hidden;"

#js设置
#隐藏
document.getElementById("testId").style.visibility="hidden";
#显示
document.getElementById("testId").style.visibility="visible";

3.jQuery显示隐藏的方法

3.1.方式一：设置参数attr的style值

#隐藏div（display:none可以换成visibility:hidden）
$("#testId").attr("style","display:none;");
#显示div（display:block可以换成visibility:visible）
$("#testId").attr("style","display:block;");

3.2.方式二：设置css属性

#隐藏div（display:none可以换成visibility:hidden）
$("#testId").css("display","none");
#显示div（display:block可以换成visibility:visible）
$("#testId").css("display","block");

3.3.方式三：调用hide()和show()方法

#隐藏div（show()表示display:block）
$("#testId").hide();
#显示div（hide()表示display:none）
$("#testId").show();