JS jQuery显示隐藏div的几种方法
<div id="demo">AAA</div>
JS隐藏和显示div的方式有两种:
方式1:隐藏后释放占用的页面空间
通过设置display属性可以使div隐藏后释放占用的页面空间.
style="display: none;"
document.getElementById("demo").style.display="none";//隐藏
document.getElementById("demo").style.display="";//显示
方式2:隐藏后仍占有页面空间,显示空白
div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白.
style="visibility: none;"
document.getElementById("demo").style.visibility="hidden";//隐藏
document.getElementById("demo").style.visibility="visible";//显示
注意:
使用第二方式更人性化,但是,用div.style.display="none"隐藏会引起,div里面的东西休眠,里面的事件就不响应了。
jQuery隐藏和显示div的方式
1、$("#demo").attr("style","display:none;");//隐藏div
$("#demo").attr("style","display:block;");//显示div
2、$("#demo").css("display","none");//隐藏div
$("#demo").css("display","block");//显示div
3、$("#demo").hide();//隐藏div
$("#demo").show();//显示div
4、$("#demo").toggle(//动态显示和隐藏
function () {
$(this).attr("style","display:none;");//隐藏div
},
function () {
$(this).attr("style","display:block;");//显示div
}
);
<div id="demo"></div>
注:
$("#demo").show()表示display:block,
$("#demo").hide()表示display:none;
1和2中的display:none可以换成visibility:hidden,display:block可以换成visibility:visible.两者的区别是前者隐藏后不占空间,而后者隐藏后会占空间
JS jQuery显示隐藏div的几种方法相关推荐
- 原生js与jQuery显示隐藏div的几种方法
原生Js与jQuery显示隐藏div的几种方法 简介:本文将会讲解,如何使用原生的JS和jquery来实现对于这个div盒子的隐藏 js 方式一 首先是进行js演示和讲解. 首先是display的方法 ...
- 隐藏div的几种方法
隐藏div的几种方法 方法1: display <div class="one"></div> .one {display: none; } 方法2: op ...
- jquery如何设置占位隐藏_JQuery显示、隐藏div的几种方法简明总结
AAA JS隐藏和显示div的方式有两种: 方式1:隐藏后释放占用的页面空间 通过设置display属性可以使div隐藏后释放占用的页面空间. style="display: none;&q ...
- css中显示隐藏div层,JS CSS 显示隐藏DIV 层
匿名用户 1级 2011-01-12 回答 调整了下标签的位置 一般js要放在css后面 最好js放在dom最后,等待dom解释完毕再执行js代码 无标题文档 #div1{ border:1px #0 ...
- 面试时被问在页面隐藏div的几种方法,总结
1.display:none; 2.visibility:hidden; 3.设置两个大小一样的div,第一个左浮动,第二个不浮动,即可将第二个div隐藏 4.设置一个父div和一个子div,子div ...
- html js 点击隐藏div,javascript实现显示和隐藏div方法汇总
javascript实现显示和隐藏div方法汇总 15种方法实现div显示和隐藏 body{ margin: 0; } h1,h2{ margin: 0; } ul{ margin: 0; paddi ...
- 隐藏和显示div的两种方法
隐藏和显示div的两种方法 方式一style="visibility: none;"visiblity:visible -------->可见visiblity:hidden ...
- html5 js 隐藏div,javascript如何显示隐藏div
javascript显示隐藏div的方法:创建一个showhidediv的方法,直接跟ID属性调用,代码为[var sbtitle=document.getElementById(id)]. 本教程操 ...
- jquery显示隐藏切换_jQuery显示,隐藏,切换
jquery显示隐藏切换 Earlier we looked into how we can use jQuery get attribute, today we will look into thr ...
最新文章
- java——慎用可变参数列表
- linux定时运行命令脚本——crontab
- oracle 安装及使用方法,Oracle安装及使用小结
- linux上还原自主nuget包需要注意的问题
- API函数MessageBox的参数与返回值
- java实现递归层次遍历_Java实现二叉树的前序、中序、后序、层序遍历(递归方法)...
- pro*C/C++支持c++开发实例
- Java开发需要达到什么样的水平才称得上架构师?
- SQLite允许向一个integer型字段中插入字符串
- asio 组播包ssdp
- 话里话外:谁才是流程的主人
- php操作mysql数据库的扩展有哪些_PHP使用PDO扩展操作mysql数据库
- MyBatis下载与简介
- 信号处理 | 维纳滤波推导
- STM32F0单片机快速入门八: Coolie DMA
- 模电基础-1:分立器件
- element实现小问号提示
- AUTOCAD绘制3D家具有感
- Kubernetes(k8s)之Service(服务)
- 计算机最基本的硬件配置,详细的Windows 10计算机硬件配置要求和最低配置