利用JS做到隐藏div和显示div

最新推荐文章于 2024-08-13 08:52:29 发布

脚本之家

最新推荐文章于 2024-08-13 08:52:29 发布

阅读量2.4k

点赞数

分类专栏：程序人生文章标签： javascript

程序人生专栏收录该内容

207 篇文章 0 订阅

订阅专栏

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="";//显示

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

脚本之家

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

js实现div层的显示与隐藏

10-17

使用js代码实现div层的显示与隐藏，主要是radio的属性。

JS jQuery显示隐藏div的几种方法

最新发布

PieroPc的博客

08-13

384

显示与隐藏 \ 数字小写转中文大写 \日期与日期单号\生成二维码\搜索提示框示例\一键复制内容到剪贴板\导出CSV文件\单页设计\带搜索的商品分页显示全部\中文转字母首字母\...

js实现隐藏和显示div的两种通用方法

祖哥的博客

10-30

1万+

说明：这里我只是简单的写个demo，只要掌握怎么写怎么实现就ok了第一种：jquery实现隐藏和显示div <div > <div id="demo1">隐藏</div> <div id="demo2">显示</div> </div> <script> $("#d

关于div的隐藏

自由鱼√

10-09

1851

关于div的隐藏div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白style="visibility: none;"document.getElementById("typediv1").style.visibility="hidden";//隐藏document.getElementById("typediv1").style.visibility="visible"

jquery之超简单的div显示和隐藏特效demo

a506690的专栏

10-14

740

1DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2html xmlns="http://www.w3.org/1999/xhtml"> 3head> 4meta http-equiv="Conten

div 隐藏和显示

flyer222的专栏

04-23

4474

标题：关于div的隐藏出处：沧海一粟时间：Wed, 27 Sep 2006 10:53:45 +0000作者：jed地址：http://jed.dzhope.com/read.php/83.htm内容：div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白style="visibility: none;"document.getElementById("typediv1")

js控制div显示与隐藏

linwei_hello的专栏

08-04

877

js显示隐藏层 function showdiv(targetid,objN){ var target=document.getElementById(targetid); var clicktext=document.getElementById(objN) if (target.style.display=="b

js中div的显示和隐藏

weixin_44389107的博客

01-20

2877

一.方式1：隐藏后仍占有页面空间，显示空白 div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白 style="visibility: none;" //在Div中设置style属性 document.getElementById("typediv1").style.visibility="hidden";//隐藏 documen...

jQuery拖动div、移动div、弹出层实现原理及示例

10-26

3. 在mousemove事件中，利用之前记录的位置差值来动态更新div的top和left属性，实现拖动效果。 4. 在mouseup事件中停止拖动效果，防止div继续移动。以上知识点涵盖了从基础的CSS样式设置到复杂的jQuery事件监听...

js重新渲染div_Vue渲染方式

weixin_39827589的博客

11-20

976

Vue中的渲染方式总结可分四种:原有模板语法，挂载渲染使用render属性，createElement函数直接渲染使用render属性，配合组件的template属性，createElement函数渲染使用render属性，配合单文件组件，createElement函数渲染方式一原有模板语法，挂载渲染：就是对使用Vue标签语法的hmtl进行渲染。实例代码如下：<!DOCTYPE html&g...

js实现多div的显示和隐藏

07-03

js实现多div的显示和隐藏,可实现选项卡效果。详细说明：http://www.our-code.com/news/201073/n616722.html 源码在文章中也全。

jquery和js实现对div的隐藏和显示方法

12-01

jQuery对div的显示和隐藏：显示：代码如下: $(“#id”).show() 隐藏：代码如下: $(“#id”).show() js对div的显示和隐藏： div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白代码如下: style=”visibility: none;” document.getElementById(“typediv1″).style.visibility=”hidden”;//隐藏 document.getElementById(“typediv1″).style.visibility=”visible”;//显示通过设置d

JS做的隐藏与显示DIV可拖动弹出层

03-18

JS做的隐藏与显示DIV可拖动弹出层实例代码学习参考

jQuery实现点击除了特定div的页面其它地方，隐藏该div功能。

06-07

jQuery实现点击除了特定div的页面其它地方，隐藏该div功能。在触发DOM上的某个事件的时候会产生一个事件对象event，这个对象包含着所有与事件有关的信息，包括产生事件的元素、事件类型等相关信息，思路一中div的click事件处理程序传入的参数就是这个event对象。访问IE中的event对象有几种不同的方式，取决于指定事件处理程序的方法。直接为DOM元素添加事件处理程序时，event对象作为window对象的一个属性存在。 event对象包含了一个重要属性：target(W3C)/srcElement(IE)，这个属性标识了触发事件的原始元素，思路二就是要利用这个属性。我们可以直接对document的click事件绑定事件处理程序，在事件处理程序中判读事件源是否为id==test的div元素或其子元素，如果是则方法return不做操作，如果不是则隐藏该div。参考文档：http://blog.csdn.net/u014175572/article/details/51602502

CSS控制二级菜单动态出现不只有js才能做到

12-13

总的来说，通过理解和利用CSS的选择器和伪类，我们可以创建一些基本的交互式元素，如二级菜单的动态显示。这不仅有助于减轻服务器端和客户端的JS负担，还能提高页面加载速度。然而，对于更复杂、更丰富的交互体验，...

Vue3 - 实现搜索框获取焦点时下方显示一个 div 容器，点击 input 输入框时底部出现下拉框容器，当失去焦点时底部容器隐藏（仿造类似百度搜索框效果，可做下拉提示搜索或热门推荐等功能）

王佳斌

10-16

2811

vue3，搜索框，element ant design vue3全局搜索框，vue3网站网页项目，vue3搜索框点击出现下方容器，vue3搜索框获得焦点后下方出现div推荐，vue3如何实现点击搜索框时下方出现容器，vue3 element搜索框激活时底部显示其他内容，vue3实现类似百度搜索框功能效果，vue3仿百度搜索框详细教程源码代码，input搜索框获得focus焦点时下方显示额外容器，input输入框获取焦点下面显示内容,失去焦点隐藏内容，vue3输入框激活时显示下拉容器，Vue3实现input输

浏览器占满整个屏幕_如何实现div布满整个浏览器，全屏

weixin_42313675的博客

12-31

2325

响应式网站建设今天一个流行的设计处理的网站是为了填补宽度和浏览器窗口的一个大的图像和/或消息主页上的高度。在网站的响应在布局的改变基于用户的设备和屏幕尺寸，如果他们要包括可用于这些各种屏幕空间这些屏幕图像跨越必须在大小可变的。实现这一变量的大小是很容易的，至少当它涉及到的宽度，但得到一个HTML元素的高度，填补了可用的屏幕空间一直是斗争。这一斗争引进CSS视域单位结束。使用百分比在这两个重要组成部...

javascript实现div的显示和隐藏

Wind_Lam的专栏

05-25

752

oec2003<!--function toggle(targetid){ if (document.getElementById){ target=document.getElementById(targetid); if (target.style.display=="block"){

html js 点击隐藏div,javascript实现显示和隐藏div方法汇总

06-12

好的，这是一个比较常见的问题，我可以为您提供以下实现方法： 1. 使用JavaScript的style.display属性实现显示和隐藏： ```javascript // 隐藏元素 document.getElementById("myDiv").style.display = "none"; // 显示元素 document.getElementById("myDiv").style.display = "block"; ``` 2. 使用jQuery的hide()和show()方法实现显示和隐藏： ```javascript // 隐藏元素 $("#myDiv").hide(); // 显示元素 $("#myDiv").show(); ``` 3. 使用jQuery的toggle()方法实现切换显示和隐藏： ```javascript $("#myDiv").toggle(); ``` 4. 使用CSS的display属性实现显示和隐藏： ```css /* 隐藏元素 */ #myDiv { display: none; } /* 显示元素 */ #myDiv { display: block; } ``` 以上是几种常见的实现方法，您可以根据您的具体需求选择适合您的方法。希望能够帮到您！