一、

 

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隐藏元素且让出所占页面空间。

 

二、

 

display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别:

 

display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。

 

visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。

 
隐藏方法举例
position: absolute; top:-999em;  屏幕阅读器可识别
position: absolute; visibility:hidden; 屏幕阅读器不可识别
display:none;  屏幕阅读器不可识别

Display 和Visible 区别的更多相关文章

  1. 隐藏与显示：display/visibility/visible区别

    说到标签的隐藏,你们会用到什么呢?display?visibility?还是服务器控件的visible? 显然,这三者都能起到隐藏与显示的效果,但是用途确完全不一样,请看用法与区别: <div ...

  2. js display， visible 区别

    注意: display:none和visible:hidden都能把网页上某个元素隐藏起来,在视觉效果上没有区别,但是在一些DOM操作中两者有区别: display:none ---不为被隐藏的对象保 ...

  3. readonly、disabled、display、visible的区别

    display和visible的区别: (1)首先说明的是display:none和visible:hidden都能够实现将网页上某个元素隐藏起来. (2)如果在样式文件或页面文件代码中直接用disp ...

  4. display:inline 和display:inline-block和display:block的区别

    之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...

  5. Html style="visibility:hidden"与style="display:none"的区别

    style="visibility:hidden": 使对象在网页上隐藏,但该对象在网页上所占的空间没有改变. style="display:none": 使对 ...

  6. display、visibility、visible区别

    标签的隐藏可以有三种:display.visibility.服务器控件的visible. 显然,这三者都能起到隐藏与显示的效果,但是用途确完全不一样,请看用法与区别: <div style=&q ...

  7. CSS:opacity:0,visibility:hidden,display:none的区别

    CSS中opacity=0,visibility=hidden,display=none的时候,三者有什么区别呢?? 参考了stackoverflow的博客,才发现区别如下所示: Here is a ...

  8. 关于隐藏元素高度的问题 css visibility:hidden 与 display:none的区别

    其实这是一个老问题了,s visibility:hidden 与 display:none 共同点就是都会似的元素不可见.但是 visibility:hidden 的DOM元素是占用空间的,会挤占其他 ...

  9. visibility:hidden和display:none的区别

    大家知道,如果想让某一段代码在前台不显示,最简单的方法是用css的display:none即可,这样下边的内容就自动上移或右侧的左移来填补这个空隙. 但特殊情况下我们只需要隐藏这个元素,但它的位置不能 ...

随机推荐

  1. IDEA——IDEA使用Tomcat服务器出现乱码问题

    最近刚使用IDEA,在开发一个功能的时候,开始使用Jetty作为容器进行web项目开发,测试通过.然后想了一下线上服务器使用的容器是Tomcat,还是用Tomcat跑一下项目在测试一下,本地和服务器使 ...

  2. spring事务不会进行回滚的情况

    if(userSave){ try { userDao.save(user); userCapabilityQuotaDao.save(capabilityQuota); } catch (Excep ...

  3. mybatis 架构

    官网地址:http://code.google.com/p/mybatis/ 版本:mybatis 3.2.3 生成工具:mybatis-generator-core-1.3.2-bundle.zip ...

  4. Java线程池详解

    一.线程池初探 所谓线程池,就是将多个线程放在一个池子里面(所谓池化技术),然后需要线程的时候不是创建一个线程,而是从线程池里面获取一个可用的线程,然后执行我们的任务.线程池的关键在于它为我们管理了多 ...

  5. Spring之注解实现aop(面向切面编程)

    1:Aop(aspect object programming)面向切面编程,名词解释:    1.1:功能:让关注点代码与业务逻辑代码分离    1.2:关注点        重复代码就叫做关注点  ...

  6. 集 降噪 美颜 虚化 增强 为一体的极速图像润色算法 附Demo程序

    在2015年8月份的时候,决心学习图像算法. 几乎把当时市面上的图像算法相关书籍都看了一遍, 资金有限,采取淘宝买二手书,长期驻留深圳图书馆的做法, 进度总是很慢,学习算法不得其法. 虽然把手上所有书 ...

  7. 【框架学习与探究之宿主服务--Topshelf】

    前言 此文欢迎转载,原始链接地址:http://www.cnblogs.com/DjlNet/p/7603819.html 正文 原先也偶然见过这个关键词,当时只是有个大致了解貌似和WinServic ...

  8. 程序员 各种PDF格式电子书--免费网盘资源

    Java <设计模式之禅(完整高清版)> 链接:http://pan.baidu.com/s/1bo7noMb 密码:5kve  <重构_改善既有代码的设计> 链接:http: ...

  9. 关于如何绑定Jquery 的scroll事件（兼容浏览器 Wookmark瀑布流插件）

    做一个随屏幕滚动的导航条时,发现一个问题: 火狐.谷歌.ie9正常,ie8.7.6页面滚动时,导航条没有反应. 代码如下: $(document).bind("scroll",fu ...

  10. 简单说下C#变量的作用域

    变量的作用域分为局部变量和全局变量举个小例子 class Program { int i = 3;//这个变量i 需要实例化Program才能使用 static void Main(string[] ...