​总结：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. 关于宏MACRO，我们需要知道的事

    一.先从最宏观的角度来了解宏,这里的宏观角度是指程序的运行流程: 1,提交代码后,SAS先把代码读取储存到堆栈中: 2,用文本扫描插件来扫描堆栈中的代码,从上到下,从左到右: 3,扫描到一个分号,则编 ...

  2. ClientAbortException ：客户端异常终止

    ClientAbortException :客户端异常终止 java.io.IOException: 你的主机中的软件中止了一个已建立的连接. 罪魁祸首: <img src="chec ...

  3. ASP.NET Core MVC的基础学习笔记

    最近由于“武汉肺炎”疫情在家办公,也没闲着,最近学习了一下asp.net core mvc的一些网页开发的的基础知识,话不多说直接上教程! 一.创建Web应用程序 1)创建新项目--->找到 “ ...

  4. 基于SSM开发自行车在线租赁管理系统源码

    开发环境: Windows操作系统开发工具: Myeclipse+Jdk+Tomcat+MYSQL数据库注意:此项目分管理员与普通用户两种角色运行效果图 源码及原文链接:https://javadao ...

  5. 带输入提示的搜索框ajax请求

    先放图 首先要引用的文件有: base.css  https://www.cnblogs.com/chenyingying0/p/12363689.html jquery.js transition. ...

  6. 表关联使用INNER JOIN实现更新功能

    准备一些数据,创建2张表,表1为学生表: CREATE TABLE [dbo].[Student] ( [SNO] INT NOT NULL PRIMARY KEY, ) NOT NULL, ,) N ...

  7. VMvare桥接网络连接不上解决办法

    记一次学习中的突发状况.由于本人的pc时长要在不同的网络中进行切换,ip地址一般都是不固定的,所以我使用虚拟机的时候一般使用的都是让VMvare自动识别网络环境.直到今天遇到一种突发情况,VMvare ...

  8. JavaScript使用MQTT

    1.MQTT Server使用EMQTTD开源库,自行安装配置: 2.JS使用Websocket连接通信. 3.JS的MQTT库为paho-mqtt,git地址:https://github.com/ ...

  9. Java 8 函数式编程

    今天打开Oracle Java官网一看,Java已经更新到 13 了 https://www.oracle.com/technetwork/java/javase/jdk-relnotes-index ...

  10. mac本地安装全局包报错npm WARN checkPermissions

    安装本地全局包时,本地报错 npm WARN checkPermissions Missing write access to /Users/xxx/.nvm/versions/node/v11.10 ...