加载中…
个人资料
- 博客访问：
- 关注人气：
- 获赠金笔：0支
- 赠出金笔：0支
- 荣誉徽章：
html学习--display中的none与hide的区别
(2014-06-20 09:59:07)
标签：
display
hidden
区别
分析
|
分类：
HTML学习
|
在jQuery中,如果我们想要隐藏指定的元素,那么我们既可以使用hide()方法,又可以设置该元素的display属性的属性值为none.现在我们来讨论一下这两种方法的区别.
下面用一个简单的小例子来说明这两种属性的区别:
html 代码如下:
<body>
<div id="one"
style="visibility:hidden; ;height: 20px;width:1024px;
background-color:
red;">ddd</div>
<div id="two"
style="height: 20px;width: 1024px; background-color:
blue;">bbb</div>
<div id="three"
style="height: 20px;width: 1024px; background-color:
black;">bbb</div>
</body>
测试1:
给id为"one"的div设置其style中的visibility属性为hidden;
测试结果:
http://s1/mw690/003x41Zigy6JOIGUHCg50&690
分析:
由结果可以看出当visibility属性的属性值为hidden时,id为one的div不见了(该div背景颜色为红色),但是后面两个div并没有占据前面那个div的位置.这就像我们所说的看不见,但是的确存在.
测试2: 给id 为"two"的div设置display为none;
测试结果:
http://s4/mw690/003x41Zigy6JOIYbrgL63&690
分析:
从结果我们可以清晰的看出那个id为"two"的div消失不见了,而且后面的那个div也占据了它的位置,这就像我们所说的,看不见又摸不着.
以上就是我对这两个属性的简单认识和区别分析.
喜欢
0
赠金笔
加载中，请稍候......
(2014-06-20 09:59:07) 
加载中…