JS隐藏和显示div的方式有两种:

需要注意的是用JS设置div的属性,必须在ccs中设置对应属性,否则报错。

同理可以设置相同class,进行批量设置。

  1. display--隐藏后释放占用的页面空间。

style="display: none;"

document.getElementById("demo").style.display="none";//隐藏
document.getElementById("demo").style.display="";//显示
  1. visibility--隐藏后仍占有页面空间,显示空白。

style="visibility: none;"

document.getElementById("demo").style.visibility="hidden";//隐藏
document.getElementById("demo").style.visibility="visible";//显示

注意:使用第二方式更人性化,但是,用div.style.display="none"隐藏会引起,div里面的东西休眠,里面的事件就不响应了。

jQuery隐藏和显示div的方式

  1. .attr
$("#demo").attr("style","display:none;");//隐藏div
$("#demo").attr("style","display:block;");//显示div
  1. .css
$("#demo").css("display","none");//隐藏div
$("#demo").css("display","block");//显示div
  1. hide()、show()
$("#demo").hide();//隐藏div
$("#demo").show();//显示div
  1. hide()、show()
$("#demo").hide();//隐藏div
$("#demo").show();//显示div

注:1和2中的display:none可以换成visibility:hidden,display:block可以换成visibility:visible.两者的区别是前者隐藏后不占空间,而后者隐藏后会占空间。

最新文章

  1. Android工程的编译过程
  2. sqlserver Between And的问题
  3. C#版 Winform界面 Socket编程 Server服务器端
  4. Make Notepad++ auto close HTML/XML tags after the slash(the Dreamweaver way)
  5. IStream 接口
  6. 关于web软件信息安全问题防护资料的整理(三)
  7. macbook安装win7
  8. page,client,offset区别
  9. git rebase 介绍
  10. NTP服务搭建
  11. Linux Shell产生16进制随机数
  12. Azkaban2官方配置文档
  13. RTX管理器服务运行状态空白
  14. 深入理解Oracle中的随机函数
  15. 视频剪辑软件原型-videocut
  16. ****** 四十二 ******、软设笔记【软件知识产权保护】-Internet和Intranet基础
  17. Access restriction: The constructor SunJCE() is not accessible 错误
  18. spark高级编程
  19. 55.UIbutton点击切换颜色
  20. lnmp源码编译安装zabbix

热门文章

  1. IDEA中引入smarttomcat后控制台输出乱码,运行跳转到浏览器
  2. JavaScript的Array.flat()函数深入探讨
  3. asp.net core 浏览器向服务端传递对象或对象数组参数服务端接收方式
  4. 【Python】语言的控制流程
  5. 如何在Debian10镜像中设置Nginx引擎模块
  6. 权昌TSC244条码打印机如何加载数据实现大批量打印呢?
  7. vue - 解决页面跳转到外部链接后,ios回退到本页面,生命周期,路由导航守卫钩子都无法触发的问题
  8. 1255. 得分最高的单词集合 (Hard)
  9. idea热部署插件JRebel激活
  10. 利用Comparator对枚举类型进行排序的实现