​总结：display:none  属性会使元素完全隐藏，js无法获得元素，通过js设置style.display="inline-block" 后 js才可获得此元素的属性和内容。通过js将style.display设为空不管用。

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

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

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

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

CSS：display:none的使用注意事项的更多相关文章

  1. CSS display:inline-block

    CSS display:inline-block 在css布局里,我们经常看到代码 「display:inline-block; *display:inline; zoom:1; 」,大多人会说上面的 ...

  2. [转]CSS Display(显示) 与 Visibility（可见性）

    CSS Display(显示) 与 Visibility(可见性) display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. 隐藏元素 - display:non ...

  3. CSS display:inline和float:left两者区别探讨

     本文和大家重点讨论一下CSS display:inline和float:left两者的区别,CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有 ...

  4. CSS Display(显示) 与 Visibility（可见性）

    display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. Box 1 Box 2 Box 3 隐藏元素 - display:none或visibility:hid ...

  5. [CSS3] CSS Display Property: Block, Inline-Block, and Inline

    Understanding the most common CSS display types of block, inline-block, and inline will allow you to ...

  6. CSS display:table属性用法- 轻松实现了三栏等高布局

    display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...

  7. CSS display：inline-block的元素特点：

    将对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行内,允许空格. 在CSS中,块级对象元素会单独占一行显示,多个block元素会各自新起一行,并且可以设置width,h ...

  8. CSS DISPLAY AND POSITIONING

    CSS DISPLAY AND POSITIONING Review: Layout Great job! In this lesson, you learned how to control the ...

  9. CSS Display（显示）和Visibility（可见性）

    CSS Display(显示)和Visibility(可见性) 一.简介 display属性设置一个元素应如何显示(隐藏不占用空间),visibility属性指定一个元素应可见还是隐藏(隐藏占用空间) ...

  10. css display属性详解

    css display属性在对css做layout设计时非常重要,它的值有以下几种: Value Description Play it inline Default value. Displays ...

随机推荐

  1. 面试突击 | Redis 如何从海量数据中查询出某一个 Key？附视频

    1 考察知识点 本题考察的知识点有以下几个: Keys 和 Scan 的区别 Keys 查询的缺点 Scan 如何使用? Scan 查询的特点 2 解答思路 Keys 查询存在的问题 Scan 的使用 ...

  2. C# 根据天、周、月汇总统计生成统计报表

    先看核心代码: public List<DataEntity> SearchShopSalesReport(DateTimeOffset? dateFrom, DateTimeOffset ...

  3. iOS 开发技术栈与进阶

    最近有一些开发朋友问我应该怎样提升自己的能力,回想起来做了这么久 iOS 开发,我也有过那种“让我做一个功能实现个需求我会做,但接下来怎样提高我不知道.”的时期,这里尝试列一下 iOS 开发的相关技术 ...

  4. gradle与android studio 关系及gradle配置

    前言 我们一般开发android 使用android studio ,android studio 安装的时候,会帮我们做两件事,配置好自己的jdk. 实际上,使用的其实不是我们在path中配置的jd ...

  5. C# 通过反射检查属性是否包含特定字符串

    public static bool StringFilter(this object model,string filterStr) { if (string.IsNullOrEmpty(filte ...

  6. #《Essential C++》读书笔记# 第七章 异常处理

    基础知识 异常处理机制有两个主要成分:异常的鉴定和发出,以及异常的处理方式.通常,不论是membe function和non-member function,都有可能产生异常以及处理异常.异常出现后, ...

  7. Python3标准库：queue线程安全的FIFO实现

    1. queue线程安全的FIFO实现 queue模块提供了一个适用于多线程编程的先进先出(FIFO,first-in,first-out)数据结构,可以用来在生产者和消费者线程之间安全地传递消息或其 ...

  8. opencv —— HoughCircles 霍夫圆变换原理及圆检测

    霍夫圆变换原理 霍夫圆变换的基本原理与霍夫线变换(https://www.cnblogs.com/bjxqmy/p/12331656.html)大体类似. 对直线来说,一条直线能由极径极角(r,θ)表 ...

  9. Android实战项目——家庭记账本（二）

    今天主要是对昨天做的添加账单信息的功能做了完善,实现了数据库的相关操作,如图是对已添加的账单信息的总结显示. 目前实现了通过日期进行汇总的功能,如上图中的各项item就是通过对所有账单信息进行按日期汇 ...

  10. Mybatis Dao接口与Xml文件不匹配的问题：Invalid bound statement (not found)

    <!-- 如果不添加此节点mybatis的mapper.xml文件都会被漏掉. --> <resources> <resource> <directory&g ...