CSS:display:none的使用注意事项
总结: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的使用注意事项的更多相关文章
- CSS display:inline-block
CSS display:inline-block 在css布局里,我们经常看到代码 「display:inline-block; *display:inline; zoom:1; 」,大多人会说上面的 ...
- [转]CSS Display(显示) 与 Visibility(可见性)
CSS Display(显示) 与 Visibility(可见性) display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. 隐藏元素 - display:non ...
- CSS display:inline和float:left两者区别探讨
本文和大家重点讨论一下CSS display:inline和float:left两者的区别,CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有 ...
- CSS Display(显示) 与 Visibility(可见性)
display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. Box 1 Box 2 Box 3 隐藏元素 - display:none或visibility:hid ...
- [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 ...
- CSS display:table属性用法- 轻松实现了三栏等高布局
display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...
- CSS display:inline-block的元素特点:
将对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行内,允许空格. 在CSS中,块级对象元素会单独占一行显示,多个block元素会各自新起一行,并且可以设置width,h ...
- CSS DISPLAY AND POSITIONING
CSS DISPLAY AND POSITIONING Review: Layout Great job! In this lesson, you learned how to control the ...
- CSS Display(显示)和Visibility(可见性)
CSS Display(显示)和Visibility(可见性) 一.简介 display属性设置一个元素应如何显示(隐藏不占用空间),visibility属性指定一个元素应可见还是隐藏(隐藏占用空间) ...
- css display属性详解
css display属性在对css做layout设计时非常重要,它的值有以下几种: Value Description Play it inline Default value. Displays ...
随机推荐
- Keras深度学习框架之损失函数
一.损失函数的使用 损失函数[也称目标函数或优化评分函数]是编译模型时所需的两个参数之一. model.compile(loss='mean_squared_error', optimizer='sg ...
- NCE L6
- Android中使用SeekBar拖动条实现改变图片透明度
场景 效果 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 将布局改为Lin ...
- windows10家庭版的策略组
策略组是个好东西,可惜家庭版没有 但是,请看大佬博客https://blog.csdn.net/cangsheng45/article/details/82262037
- 使用uftrace来debug应用程序
谈uftrace之前,先谈谈ftrace. ftrace是一个用于调试linux内核的工具,它可以用于调试内核的调用栈,performance等. ftrace的核心是在编译内核代码时,通过制定-pg ...
- 你没有见过的【高恪】船新版本(SX3000 NAT1 X86魔改)
最近魔改了高恪SX3000 X86,做了如下更改: 开启了SSH 集成了插件(酸酸乳.V2RXY.SMB等等) 开启了NAT1 DIY了主题 精简了官方内置的无用应用和模块 截图(建议右击图片,在新标 ...
- c++输入输出,保留几位小数
#include <iomanip> //头文件 //第一种写法 cout<<setiosflags(ios::); //第二种写法 cout.setf(ios::fixed) ...
- 抖音快手短视频去水印API,接口开发文档
开发者官网:http://api.lingquan166.com/ 简介:根据抖音.微视.小红书.皮皮搞笑等APP中复制出来的链接,解析获取短视频的标题.封面.无水印短视频地址等信息. 接口地址: h ...
- TP6文档-邓士鹏
2019年5月11日 - 教程为您提供<ThinkPHP6.0极速入门(视频教程)>之 TP6的目录结构 章节的在线实战教程供您学习,你可以进行笔记.提问.讨论和资料下载 https:// ...
- css常用样式背景background如何使用
css背景background属性常用于定义HTML的背景,background简写属性作用是将背景属性设置在一个声明中,background背景属性常见为以下这些:.background-color ...