CSS 实现div显示或隐藏的三种方法(display 和 visibility的区别) | 您所在的位置:网站首页 › cssdiv是什么 › CSS 实现div显示或隐藏的三种方法(display 和 visibility的区别) |
一、使用CSS的 display 属性来隐藏或显示div: display 属性规定元素应该 生成的框的类型,可以通过 display:none 来隐藏某一元素。 style="display: none;" document.getElementById("typediv1").style.display="none";//隐藏 document.getElementById("typediv1").style.display="";//显示二、使用CSS的 visibility 属性来隐藏或显示div: visibility 属性指定一个元素是否是可见的,可以通过 visibility:hidden 来隐藏某一元素。 style="visibility: none;" document.getElementById("div1").style.visibility="hidden";//隐藏 document.getElementById("div1").style.visibility="visible";//显示三、display 和 visibility 属性的区别: display属性设置一个元素应该如何显示,而visibility属性指定一个元素应可见还是隐藏。 隐藏元素 -display:none 或 visibility:hidden 隐藏一个元素可以通过把display属性设置为none,或把visibility属性设置为hidden。但是请注意,这两种方法会产生不同的结果。 visibility:hidden:可以隐藏某一元素,但隐藏的元素仍需占用与未隐藏之前一样的空间,也就是说,该元素虽然被隐藏了,但仍然会影响布局。 h1.hidden {visibility:hidden;}display:none:可以隐藏 某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。 h1.hidden {display:none;}所以display和visibility控制的分别是html元素是否存在和是否显示,dispay的属性定义该元素存在或不存在,而visibility属性只是控制该元素是否显示出来,实际上还是存在的。 四、使用JQuery的 show() 和 hide() 方法将一个div显示或隐藏: 1、show() 方法实现显示隐藏的被选元素: 注:show() 适用于通过 jQuery 方法 和 CSS中 display:none 隐藏的元素(你适用于通过 visibility:hidden 隐藏的元素)。 语法:$ (selector).show(speed,easing,callback) 具体参数详情 点这里 $("button").click(function(){ $("p").show(); });2、hide() 方法实现隐藏被选元素: 提示:这与CSS属性display:none 类似。 注释:隐藏的元素不会被完全显示(不影响页面的布局)。 语法:$ (selector).hide(speed,easing,callback) 具体参数详情 点这里 $("button").click(function(){ $("p").hide(); }); |
CopyRight 2018-2019 实验室设备网 版权所有 |