css display:none使用注意事项小结
字体：[ ] 类型：转载 时间：
web页面前台编码时经常用到display:none样式，平常使用时发现有几点特征需要注意
1、如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏，载入页面后，在没有通过js设置样式使元素显示的前提下，使用js代码会无法正确获得该元素的一些属性，比如offSetTop,offSetLeft等，返回的值会为0，通过js设置style.display来使元素显示后才能正确获得这些值。 2、使用display:none隐藏的元素不会被百度等搜索网站检索，会影响到网站的SEO，某些情况下可以使用left:-100000px来达到同样效果。 3、如果是通过样式文件或&style&css&/style&方式来设置元素的display:none样式，用js设置style.display=""并不能使元素显示，可以使用block或inline等值来代替。通过style="display:none"直接在元素上进行的设置不会有这个问题 4、有些情况下可以使用style.visibility来代替style.display，但是要注意的是style.visibility隐藏元素时会保留元素在页面上所占的空间，而style.display隐藏元素且让出所占页面空间。
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具后使用快捷导航没有帐号？
只需一步，快速开始
查看: 51824|回复: 32
display:none和visibility:hidden的区别！
UID416583在线时间 小时积分796帖子离线17029 天注册时间
高级会员, 积分 796, 距离下一级还需 204 积分
在网站上看到：“
display:none和visibility:hidden都是把网页上某个元素隐藏起来的功能，但两者有所区别，经过亲自实验，我发现使用 visibility:hidden属性会使对象不可见，但该对象在网页所占的空间没有改变（看不见但摸得到），等于留出了一块空白区域，而 display:none属性会使这个对象彻底消失（看不见也摸不到）。
”这样的解释。
但是我觉得并不够，所以就想了一下关于他的一个加载问题。
有属性display:的结构在加载页面时，是否会同时加载呢？或则是当他变成display:的时候才加载的呢？
有属性visibility:& &的结构在加载页面时，是否会同时加载呢？或则是当他变成visibility:& &的时候才加载的呢？
个人的看法是：
display:;当他的值变成block 的时候，它所在的结构才会被加载进来。
而visibility就会在加载页面的同时就已经把它加载进来了，因为他的值为hidden的时候，它所占的空间还在。
这些观点都是我的一个推测，本人并不知道如何去测试，也找不到这方法的资料，所以到此来跟大家讨论讨论。
还望各位大虾指点迷津。
[[i] 本帖最后由 kaka48265 于
13:54 编辑 ]
UID113052在线时间 小时积分2116帖子离线17029 天注册时间
银牌会员, 积分 2116, 距离下一级还需 884 积分
这个问题，前些天我去参加一个面试的时候，面试官问过我。回来仔细研究了下，你的解释是完全正确的。
至于你的疑虑。我的答案是（仅供参考）：不管是用了什么css样式，html里的元素都会在打开网页后一并加载。这个说到底也是css的基本功能。就是结构与表现的分离。我们的html是结构，结构会全部加载，但是在表现的时候（也就是页面的外观），由css来控制你看的到还是看不到而已。
所以你说的：“display:none和visible:hidden都是把网页上某个元素隐藏起来的功能，但两者有所区别，经过亲自实验，我发现使用 visible:hidden属性会使对象不可见，但该对象在网页所占的空间没有改变（看不见但摸得到），等于留出了一块空白区域，而 display:none属性会使这个对象彻底消失（看不见也摸不到）。”
就这样理解即可。
UID416583在线时间 小时积分796帖子离线17029 天注册时间
高级会员, 积分 796, 距离下一级还需 204 积分
非常感谢你的解释！
我的问题你已经很好的跟我解释了。
不过不知道我们是否能扩展一下。
能否实现一个在点击它显示这个结构的时候他才加载的方法。
如果用一个iframe可否实现呢？
（我们暂且不说他合不合理。）
[[i] 本帖最后由 kaka48265 于
12:49 编辑 ]
UID496283在线时间 小时积分3439帖子离线17029 天注册时间
visibility复制代码
UID416583在线时间 小时积分796帖子离线17029 天注册时间
高级会员, 积分 796, 距离下一级还需 204 积分
原帖由 [i]birdstudio 于
12:53 发表
visibility
亲爱的版主，麻烦您稍稍的解释一下。
我真不懂。
我上面好像有说到visibility 这个属性。
UID89332在线时间 小时积分19252帖子离线17029 天注册时间
display属性设定为“none”的元素将不产生任何的框（Box），也就是说，元素对布局没有影响，浏览器将不显示该元素，包括其后代元素。更不会占位。
而如果设定“visibility : hidden”则会生成元素框，只是元素“不可视”，而其他非视觉的属性都将生效，例如widht、padding等。
UID496283在线时间 小时积分3439帖子离线17029 天注册时间
回复 5# kaka48265 [楼主] 的帖子
你自己检查一下你的拼写。
UID416583在线时间 小时积分796帖子离线17029 天注册时间
高级会员, 积分 796, 距离下一级还需 204 积分
谢谢你的解释。
不过并非我们讨论的范围了！
谢谢提醒，已经修改。
希望大家踊跃参与，提出宝贵意见。
如何实现控制它显示的时候它才加载进页面的方法。
UID496283在线时间 小时积分3439帖子离线17029 天注册时间
原帖由 [i]kaka48265 于
13:58 发表
如何实现控制它显示的时候它才加载进页面的方法。
传说中的 Ajax ？
UID492258在线时间 小时积分1135帖子离线17029 天注册时间
银牌会员, 积分 1135, 距离下一级还需 1865 积分
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&title&无标题文档&/title&
#test { display:}
&a href=&#& onclick=&javascript:document.getElementById('test').style.display='block'&&test&/a&
&div id=&test&&&iframe src=&& frameborder=&0& width=&100%& height=&1000&&&/iframe&
&br /&&br /&&br /&&br /&&br /&
&提示：您可以先修改部分代码再运行
个人的看法是：
display:;当他的值变成block 的时候，它所在的结构才会被加载进来。
而visibility就会在加载页面的同时就已经把它加载进来了，因为他的值为hidden的时候，它所占的空间还在。
你这个说法是不对的，应该都是在页面载入的时候就加载了
可以通过隐藏IFRAME来测试
页面载入的时候请注意看你浏览器的状态栏。
UID92394在线时间 小时积分44帖子离线17029 天注册时间
新手上路, 积分 44, 距离下一级还需 6 积分
上楼的对，display:none和visibility:hidden都在页面加载时加载了。
你说visibility:hidden看不见但摸得到？我怎么摸不到呢？用ie和ns都摸不到，只是占用了位置。
UID509052在线时间 小时积分435帖子离线17029 天注册时间
中级会员, 积分 435, 距离下一级还需 65 积分
你们说的加载是什么意思？&&如果指浏览器加载网络资源的话，那应该是display:block的时候才会被加载
大家可以做一个实验：下面这段代码，先在 #test { display:} 的情况下运行，然后断开网络，把display:none改成display:block 运行，结果是图片并没有被显示。在连接上网络，刷新，图片就显示了。
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&title&无标题文档&/title&
#test { display:border:1px #}
&div id=test&
&img src=&/user/999/.jpg& title=&春哥纯爷们& alt=&& /&
&提示：您可以先修改部分代码再运行
UID492258在线时间 小时积分1135帖子离线17029 天注册时间
银牌会员, 积分 1135, 距离下一级还需 1865 积分
回复 12# kapiter
这位童鞋的理解直接脱离了网络，是不是说当你打开某个网站之后，然后断开网络刷新一下，你就可以直接读取本地缓存上的信息？
显然这是不成立的。
“下面这段代码，先在 #test { display:} 的情况下运行（会加载隐藏的内容），然后断开网络（此时内容页还在），把display:none改成display:block 运行（你修改之后运行需要刷新），结果是图片并没有被显示（网络都断开了还能显示个啥呀！）。”
UID509052在线时间 小时积分435帖子离线17029 天注册时间
中级会员, 积分 435, 距离下一级还需 65 积分
楼上的，我的意思就是检测display:none的时候有没有加载图片啊
如果加载了，那么浏览器的缓存里面就会有，即使断开了网络，display:block也能显示图片。
你们说的“加载”是什么意思呢？如果说是加载结构的话，那么这种讨论就完全没有意义，浏览器都是下载完整的html代码，而css只是负责表现样式。不管display:none还是display:block 我源代码里总是能看到吧，你们在讨论什么呢？
UID185235在线时间 小时积分50帖子离线17029 天注册时间
初级会员, 积分 50, 距离下一级还需 150 积分
html的代码是一开始就加载进来的。而且是第一个请求。
楼主说“能否实现一个在点击它显示这个结构的时候他才加载的方法。
如果用一个iframe可否实现呢？“
这个要看你的实现目的了，也就是需要ajax，用iframe的作用。
测试display：none的时候，是否图片会加载的方法：
建一个页面，在一个隐藏的div的放一个img。
然后通过yslow的 插件，关注下加载的请求就知道了。
UID492258在线时间 小时积分1135帖子离线17029 天注册时间
银牌会员, 积分 1135, 距离下一级还需 1865 积分
回复 14# kapiter
问题是&&图片虽然在缓存里，但页面请求的不是缓存里的图片啊。网站上的图片是远程服务器上的，缓存只对远程路径不变的情况下才能起作用。
显然你断开网络之后路径就变化了，这个时候并不是请求本地机器上的缓存文件。有原则上的区别。
UID416583在线时间 小时积分796帖子离线17029 天注册时间
高级会员, 积分 796, 距离下一级还需 204 积分
你的例子已经很好的解释了这个东西，在看地址栏的时候我才明白。
它在加载网页的时候已经把那些把隐藏（display:none和visibility:hiddden）的结构都加载进来了。
看来只能用传说中的 Ajax ？ 才能实现了！
UID509052在线时间 小时积分435帖子离线17029 天注册时间
中级会员, 积分 435, 距离下一级还需 65 积分
原帖由 [i]47tz 于
10:17 发表
问题是&&图片虽然在缓存里，但页面请求的不是缓存里的图片啊。网站上的图片是远程服务器上的，缓存只对远程路径不变的情况下才能起作用。
显然你断开网络之后路径就变化了，这个时候并不是请求本地机器上的缓存文件 ...
大哥&&你还是理解错了我的意思& &&&断开网络后display:block不显示图片 ，正是说明了没断网络之前display:none的时候图片并不加载，所以缓存里面没有嘛
UID416583在线时间 小时积分796帖子离线17029 天注册时间
高级会员, 积分 796, 距离下一级还需 204 积分
两位大虾你们讨论都有点不明白对方的意思。
我来打个太极，说明一下。（可能有所偏差）
# kapiter的意思是：断网的情况下，当你从新运行网页的时候，网页还是会向远程服务器发出请求（例子中说的即是那个图片了），并非请求本地缓存。
# 47tz的意思是：既然我本地缓存已经有了你这个图片，那么在断网的情况下，从新运行网页的时候那么就直接去请求本地缓存了。
如有说错的地方还请指出！
[[i] 本帖最后由 kaka48265 于
13:58 编辑 ]
UID509052在线时间 小时积分435帖子离线17029 天注册时间
中级会员, 积分 435, 距离下一级还需 65 积分
楼上的大哥&&你误解我的意思了&&我并不没有说断网情况下不会请求本地缓存啊
正是因为断网情况下display:block时，在缓存里面也查找不到图片，才说明了缓存里面没有图片，说明了display:none的时候并没有从网络上下载图片
如果一开始联网的时候display:block，那么图片就会被下载下来，然后再断网display:block，这时候因为缓存里面有图片 所以图片是可以显示的。
这个有那么难理解么
UID465675在线时间 小时积分1696帖子离线17029 天注册时间
银牌会员, 积分 1696, 距离下一级还需 1304 积分
回复 18# kapiter
问题是，你设置了缓存没？
没设置好，你怎么知道浏览器一定读缓存？
UID503304在线时间 小时积分450帖子离线17029 天注册时间
中级会员, 积分 450, 距离下一级还需 50 积分
v是 空白的
b是后来的可以补充上来
可以这么理解吧
UID492258在线时间 小时积分1135帖子离线17029 天注册时间
银牌会员, 积分 1135, 距离下一级还需 1865 积分
回复 19# kaka48265 [楼主] 的帖子
拜托。。。你没看错吧？我的意思是相反的。怎么会去请求缓存呢？
UID492258在线时间 小时积分1135帖子离线17029 天注册时间
银牌会员, 积分 1135, 距离下一级还需 1865 积分
回复 20# kapiter
我发现我对你所说的确实理解歪哒
断开网络后display:block不显示图片 ，正是说明了没断网络之前display:none的时候图片并不加载
这个我觉得还是不能说明问题的。
UID496283在线时间 小时积分3439帖子离线17029 天注册时间
图片的 http 请求：
UID410028在线时间 小时积分17帖子离线17029 天注册时间
新手上路, 积分 17, 距离下一级还需 33 积分
全都下载.& &
这两个一个占位一个不占位..从字面都能理解咯.none和.hidden的区别
还有需要讨论的吗.散会~
UID509052在线时间 小时积分435帖子离线17029 天注册时间
中级会员, 积分 435, 距离下一级还需 65 积分
原帖由 [i]birdstudio 于
20:20 发表
图片的 http 请求：
看他那篇文章下面的回复，有人指出问题了，他对firefox和opera在display:none的时候的测试应该有问题。
我刚才用科来抓包分析了一下，在display:none的时候确实不会向图片的源地址发出http请求，
改成display:block就可以看到浏览器发出的http请求了
UID255109在线时间 小时积分788帖子离线17029 天注册时间
高级会员, 积分 788, 距离下一级还需 212 积分
我想kapiter说的下面的意思：
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&title&无标题文档&/title&
#test { display:border:1px #}
&div id=&test&&
&img src=&/TLimages/chinabyte/image/logo.png& title=&春哥纯爷们& alt=&& /&
&button onclick='show()'&断开网络后点击&/button&
如果断开网络后点击没有出现图片：说明display:none的结构并没有一开始就加载进来&br&
如果出现图片：说明display:none的结构一开始就加载进来了&br&
我想这应该能说明问题
&script type=&text/javascript&&
function show(){
document.getElementById('test').style.display = 'block';
&提示：您可以先修改部分代码再运行
[[i] 本帖最后由 okwxj 于
00:48 编辑 ]
UID514216在线时间 小时积分119帖子离线17029 天注册时间
初级会员, 积分 119, 距离下一级还需 81 积分
这个试一下便知，上次我就发现了。一般用display: 因为visibility:依然占空间。
UID520808在线时间 小时积分92帖子离线17029 天注册时间
初级会员, 积分 92, 距离下一级还需 108 积分
用firebug就会看到结构加裁了。
&img src=&1.jpg& style=&display: none& /&
结论：只有Opera不产生请求。
注意：用visibility: hidden隐藏图片时，在Opera下也会产生请求。
Powered by求助。要怎么让display none里面的内容彻底不加载？_css吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：31,351贴子：
求助。要怎么让display none里面的内容彻底不加载？收藏
这个问题我百度了下，但是没找到答案，都是问如何让display:none的内容显示出来。而我想问的是相反，如何让被隐藏的内容彻底不加载。是这样：我通过css设置了在普通分辨率下，网页是完整显示的。而在手机端上面，我把网页上部分内容给隐藏掉了。主要是图片，因为考虑到手机端的加载速度相比电脑还是慢，所以屏蔽了。当手机在无线状态下，网页加载速度还行，但是到了户外，就很慢很慢了。于是我设置了display:none这个命令，但是发现其实内容还是加载的，只是不显示而已。请问要如何让这些内容彻底不显示呢？ 通过JS么？ 这些屏蔽的内容，在电脑端是会显示，到了手机端就自动隐藏这样。
现金红包注册即送，在享10.5%预期收益
可是试下用js判断，当条件满足时才加载
我在&head&里面写：&script language=javascript&//当分辨率小于780px时候，部分div不加载。if(screen.width == 780){document.getElementById(&clients&).style.display = &none&;}else{document.getElementById(&clients&).style.display = &block&;}&/script&这样写，这个clients是可以不显示，但是我看下来，其实还是只是不显示而已，并不是不加载，它还是会先加载，然后再不显示。和通过css来判定分辨率，再决定显示与否，殊途同归。只是却不是我要的。然后我试着写成：document.getElementById(&clients&).onloadstart = &unload&;我的想法是在侦测到这个div后，浏览器直接跳过它，不加载。-_-!试了下，没啥作用。应该是我写错了，也就是不知道如何写正确了。然后又发现了个：function window.onbeforeunload (){}在网页一开始加载前干嘛，干嘛，不过也不会写了。-_-!
举个例子，这样是不会加载的。
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或&iframe name='hideFrame' style=&display:none&&&/iframe&请问这行代码是什么意思啊？_百度知道
&iframe name='hideFrame' style=&display:none&&&/iframe&请问这行代码是什么意思啊？
里面没有任何东西;display创建一个iframe框架:none&hideFrame&quot,并且默认是隐藏的 name=&quot,命名为 hideF 是给它命名为hideFrame style=&quot
其他类似问题
为您推荐：
iframe的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁}