您现在的位置是：网站首页> 编程资料编程资料
css display:none使用注意事项小结_经验交流_
2023-05-25
205人已围观
简介 css display:none使用注意事项小结_经验交流_
1、如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏，载入页面后，在没有通过js设置样式使元素显示的前提下，使用js代码会无法正确获得该元素的一些属性，比如offSetTop,offSetLeft等，返回的值会为0，通过js设置style.display来使元素显示后才能正确获得这些值。
2、使用display:none隐藏的元素不会被百度等搜索网站检索，会影响到网站的SEO，某些情况下可以使用left:-100000px来达到同样效果。
3、如果是通过样式文件或方式来设置元素的display:none样式，用js设置style.display=""并不能使元素显示，可以使用block或inline等值来代替。通过style="display:none"直接在元素上进行的设置不会有这个问题
4、有些情况下可以使用style.visibility来代替style.display，但是要注意的是style.visibility隐藏元素时会保留元素在页面上所占的空间，而style.display隐藏元素且让出所占页面空间。
2、使用display:none隐藏的元素不会被百度等搜索网站检索，会影响到网站的SEO，某些情况下可以使用left:-100000px来达到同样效果。
3、如果是通过样式文件或方式来设置元素的display:none样式，用js设置style.display=""并不能使元素显示，可以使用block或inline等值来代替。通过style="display:none"直接在元素上进行的设置不会有这个问题
4、有些情况下可以使用style.visibility来代替style.display，但是要注意的是style.visibility隐藏元素时会保留元素在页面上所占的空间，而style.display隐藏元素且让出所占页面空间。
您可能感兴趣的文章:
相关内容
- iframe自适应高度的多种方法方法小结_经验交流_
- HTML meat作用_CSS/HTML_
- 纯CSS绘制三角形（各种角度）_基础教程_
- css实现气泡框效果(实例加图解)_CSS/HTML_
- html的基本使用（HTML标签解释）_CSS/HTML_
- HTML5 WebStorage(HTML5本地存储技术)_CSS/HTML_
- 浅谈href=#与href=javascript:void(0)的区别_经验交流_
- javascript代码规范小结_基础教程_
- Zen Coding css,html缩写替换大观 快速写出html,css_经验交流_
- Zen Coding 快速编写HTML/CSS代码的实现_经验交流_
