JS隐藏和显示div的方式

2024-06-19 04:08:25

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隐藏和显示div的方式相关推荐

js隐藏和显示div
隐藏后释放占用的页面空间 // 设置display属性 style="display: none;" document.getElementById("id") ...
原生js设置div隐藏或者显示_JavaScript动画方式控制div元素的隐藏和显示
jQuery实现此功能相对比较简单,具体参阅点击按钮动画方式隐藏和显示div一章节. 结合CSS3实现此功能也非常便利和适合,具体参阅JavaScript与CSS3动画方式改变元素尺寸一章节. 原生J ...
js点击显示div，点击取消隐藏div
js点击显示div,点击取消隐藏div <script language="javascript" type="text/javascript"> ...
隐藏和显示div的两种方法
隐藏和显示div的两种方法方式一style="visibility: none;"visiblity:visible -------->可见visiblity:hidden ...
html中和over怎么显示div,js 解决隐藏与显示div的相关问题
有仿照一个网站的功能做导航,但是我的导航中就有一栏产品中心下面用隐藏个div然后鼠标放上去就显示出来,但是导航那一块div一直出不来,什么都没有,不知道是什么原因? 下面是页面的代码: 复制代码代码如 ...
JavaScript：隐藏、显示div
参考网址:https://www.cnblogs.com/qingsong/p/5365218.html div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白 1 2 3 4 ...
通过原生 js 隐藏和显示标签元素
利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementB ...
js隐藏或显示某区域
隐藏: document.getElementById("keleyi").style.display = "none"; 显示: document.getEl ...
javascript怎么隐藏显示div
设置方法:1.使用style对象的display属性,值为"none"可隐藏div元素,值为"block"可显示元素:2.使用style对象的visibilit ...

最新文章

热门文章