hidden="hidden",display:none, visibility:hidden 三者的区别
三者都可以实现隐藏元素的效果
1:display:none 就是把元素隐藏,即在页面上看不到这个元素,并且不占据任何位置
2:hidden="hidden"在页面展示出来效果跟display:none是一样的,并且我们可以在浏览器控制台看到,浏览器就是把它解析为display:none
但是hidden="hidden" 是html,html 是有语义的,跟我们的input等等一样,他的语义就是跟浏览者不相关的,不需要的,这样的话,浏览器解析的时候就会把它隐藏掉,
因为元素不需要被浏览者看到,但是在别的地方,比如屏幕阅读器或者其它依赖语义的地方,可能就会用到它。我们常常用来提交隐藏的hidden到后端
而display:none 则是css样式相关的,从样式层面隐藏隐藏元素,并且可以程序切换它的隐藏和显示,所以,它并不是跟浏览者不相关的,而是暂时不需要显示而已
3:visibility:hidden 也是css层面的,它会隐藏元素,但是 保留元素所在页面的位置,例如
以上就是三者的异同,原答案请看知乎大神的回答
https://www.zhihu.com/question/35952297?sort=created
hidden="hidden",display:none, visibility:hidden 三者的区别的更多相关文章
- display:none;visibility:hidden;opacity:0;之间的区别
什么是回流 当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建.这就称为回流(reflow).每个页面至少需要一次回流,就是在页面第一次加载的时候,这时候是 ...
- 基础总结(04)-- display:none;&&visibility:hidden;区别
display:none 1.使元素隐藏,不再占据空间. 2.动态操作时会引起页面回流和重绘,影响性能. 3.子元素也会被隐藏并且添加display:block/visibility:visible无 ...
- 元素隐藏的方式之--hidden,display,visibility
<html lang="en"> <head> <meta charset="UTF-8"> <title>标签 ...
- JQuery可见性过滤选择器:hidden无法获取通过visibility:hidden样式隐藏的元素-遁地龙卷风
1.版本问题 如果你可以获取下列元素 <input type="hidden"/> <div style="display:none"> ...
- CSS display和visibility的用法和区别
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt408 大多数人很容易将CSS属性display和visibility混淆,它 ...
- CSS隐藏元素 display、visibility、opacity的区别
关于使指定元素无法在视野内看到,有3个方法 display: none; opacity: 0; visibility: hidden; 1.display: none; 该方法会改变页面布局. 元素 ...
- style="visibility: hidden" 和 style=“display:none”区别
大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的. visibility属性用来确定元素是显示还是隐藏的,这用visibility=& ...
- css中display:none与visibility: hidden的区别
display: none; 隐藏元素,不占用其本来空间------对应元素显示用的是display:block; visibility: hidden:元素隐藏,占用其本来的页面空间-------- ...
- style="visibility: hidden"和 style=“display:none”之间的区别
style=“display:none” 隐藏页面元素: <html> <head> <script type="text/javascript"&g ...
随机推荐
- 更改 Centos 6 的 yum 源
1.查看当前使用的源: yum repolist all 阿里源网址,使用方法点右边的帮助可以看到:https://opsx.alibaba.com/mirror 2.更改源: 第一步:备份你的原镜像 ...
- JavaScript 获取地址栏参数
1. function a() { console.log(this); } a.call(null); window 如果第一个参数传入的对象调用者是null或者undefined的话,call方法 ...
- 织梦dedecms多选checkbox字段值独立输出样式调用方法
在做织梦网站时发现dedecms的自建字段的checkboxcook输出是一段证不能把每个标签分开写样式,在晚上查了好多没页没有好的,最终用中方式来做会好 {dede:field.fyuantese ...
- hdu 2586 How far away ? 倍增求LCA
倍增求LCA LCA函数返回(u,v)两点的最近公共祖先 #include <bits/stdc++.h> using namespace std; *; struct node { in ...
- BZOJ4419: [Shoi2013]发微博 暴力
Description 刚开通的SH微博共有n个用户(1..n标号),在短短一个月的时间内,用户们活动频繁,共有m条按时间顺序的记录: ! x 表示用户x发了一条微博: + x y 表示用户x和用 ...
- 第四次程序设计作业 C++计算器计算及命令行的使用 前缀表达式方法实现
关键词:前缀中缀后缀表达式 波兰式 命令行 myGithub 一.前言 很有意思的开发和学习经历,从刚刚开始看到作业思考半天到现在的Debug过程,对我来说都或多或少有所提升. 也许这个时候自己挺迷茫 ...
- undefined!=false之解 及==比较的规则
JS中有一个基本概念就是: JavaScript中undefined==null 但undefined!==null undefined与null转换成布尔值都是false 如果按照常规想法,比如下面 ...
- Apache+Php+Mariadb+NFS+discuz
安装LAMP服务器,并利用discuz做测试 nfs + discuz 192.168.108.158 php + DNS 192.168.108.160 apache ...
- win7(64)未在本地计算机上注册 Microsoft.Jet.OLEDB.4.0 提供程序
注:本文为个人学习摘录,原文地址:http://blog.163.com/rihui_7/blog/static/2122851432013627103337825/ 1.以前在win7 64位系统上 ...
- Codeforces Beta Round #17 A.素数相关
A. Noldbach problem Nick is interested in prime numbers. Once he read about Goldbach problem. It sta ...