使用CSS display:none时注意事项

开发 前端
CSS 显示属性display有四个属性值,每个属性值都有各自的特点和作用,WEB页面前台编码时经常用到CSS display:none样式,这里向大家描述一下平常使用时需要注意的几点特征。

本文向大家介绍一下CSS display:none使用注意事项,比如使用CSS display:none隐藏的元素不会被百度等搜索网站检索,会影响到网站的SEO,某些情况下可以使用left:-100000px来达到同样效果。

CSS display:none使用注意事项

web页面前台编码时经常用到CSS display:none样式,平常使用时发现有几点特征需要注意

1、如果在样式文件或页面文件代码中直接用CSS display:none对元素进行了隐藏,载入页面后,在没有通过js设置样式使元素显示的前提下,使用js代码会无法正确获得该元素的一些属性,比如offSetTop,offSetLeft等,返回的值会为0,通过js设置style.display来使元素显示后才能正确获得这些值。

2、使用CSS display:none隐藏的元素不会被百度等搜索网站检索,会影响到网站的SEO,某些情况下可以使用left:-100000px来达到同样效果。

3、如果是通过样式文件或<style>css</style>方式来设置元素的CSS display:none样式,用js设置style.display=""并不能使元素显示,可以使用block或inline等值来代替。通过style="CSS display:none"直接在元素上进行的设置不会有这个问题

4、有些情况下可以使用style.visibility来代替style.display,但是要注意的是style.visibility隐藏元素时会保留元素在页面上所占的空间,而style.display隐藏元素且让出所占页面空间。

详细出处参考:http://www.jb51.net/article/15781.htm

【编辑推荐】

  1. CSS display:block显示布局错乱解决方案
  2. CSS display属性基本特性和语法
  3. CSS display:inline和float:left两者区别
  4. CSS属性display:inline-block使用揭秘
  5. CSS hack:实现IE6、IE7、Firefox兼容
责任编辑:佚名 来源: jb51.net
相关推荐

2011-08-02 13:08:06

Oracle索引

2010-08-10 08:49:32

FlexSDK4

2011-08-04 15:00:46

AmoebaMySQL

2010-02-03 10:21:46

初学Python

2010-09-16 09:58:44

CSS display

2010-08-25 14:01:29

CSSborder-righ

2011-05-03 16:58:55

喷墨打印机墨水

2011-08-30 10:51:40

MySQL ProxyLua分离

2010-01-14 18:19:40

C++语言

2010-01-26 16:47:47

VC++6.0

2010-01-25 18:12:28

C++

2010-11-26 16:27:01

MySQL使用变量

2010-01-18 14:25:19

使用C++Builde

2011-07-19 10:16:58

喷墨打印机注意事项

2010-07-27 14:17:52

Flex SDK4

2022-06-22 10:19:20

员工谈判专家

2010-01-26 16:54:58

学习C++

2010-01-27 09:12:01

C++语言学习

2012-03-12 16:46:22

NoSQL数据库

2011-04-14 11:28:07

光纤
点赞
收藏

51CTO技术栈公众号