​总结：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. iOS开发基础--C语言简述（一）

    先占个坑,回来再补 需要的运行环境,自行搜寻,工具不止一种,不详细叙述. C语言是一门非常重要的编程语言,与硬件底层直接相关,很多语言到最后的接口封装都会选择C语言,因而C语言一直很受欢迎,也务必掌握 ...

  2. eslint报"Extra semicolon"错误的解决

    手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元 使用 vue-cli 构建的项目,模版是 ...

  3. MySql的命令介绍

    1,连接数据库服务器命令 mysql -u 用户名 -p 密码 mysql是连接MySql数据库的命令,-u后跟用户名,-p后跟密码,如果登陆后展示"mysql",则表示登录成功. ...

  4. 并发编程之线程池ThreadPoolExecutor

    前言 在我们平时自己写线程的测试demo时,一般都是用new Thread的方式来创建线程.但是,我们知道创建线程对象,就会在内存中开辟空间,而线程中的任务执行完毕之后,就会销毁. 单个线程的话还好, ...

  5. C# 8.0 新特性之二：接口默认实现

    ​      在C#8.0中,针对接口引入了一项新特性,就是可以指定默认实现,方便对已有实现进行扩展,也对面向Android和Swift的Api进行互操作提供了可能性.下面我们来看看该特性的的概念.规 ...

  6. 《自拍教程19》aapt_apk信息查看工具

    aapt命令行工具介绍 aapt.exe(Linux/Ubuntu/imac操作系统下是未带后缀的aapt), 是android sdk自带的用于打包apk,解析apk的命令行工具软件. aapt.e ...

  7. 持续更新phpstorm h和pycharm 激活码

    1.hosts文件写入 0.0.0.0 account.jetbrains.com0.0.0.0 www.jetbrains.com 2.激活码: AHD9079DKZ-eyJsaWNlbnNlSWQ ...

  8. springboot专用的注解

    这些是springboot特有的,常见的条件依赖注解有: @ConditionalOnBean,仅在当前上下文中存在某个bean时,才会实例化这个Bean. @ConditionalOnClass,某 ...

  9. Warning: curl_setopt() [function.curl-setopt]: CURLOPT_FOLLOWLOCATION cannot be activated when in safe_mode or an open_basedir is set…

    php打印小票错误提示:Warning: curl_setopt() [function.curl-setopt]: CURLOPT_FOLLOWLOCATION cannot be activate ...

  10. 《C++Primer》第五版习题答案--第六章【学习笔记】

    <C++Primer>第五版习题答案--第六章[学习笔记] ps:答案是个人在学习过程中书写,可能存在错漏之处,仅作参考. 作者:cosefy Date: 2020/1/16 第六章:函数 ...