display 与 visibility

leanote 发布于2019-08-01 15:22 / 3126人阅读

摘要：项目开发中经常会遇到需要显示和隐藏元素。标准对这个两个属性的解释如下设置元素如何显示。此元素会被显示为内联元素，元素前后没有换行符。被行或列占据的空间会留给其他内容使用。但是行调换位置后，设置鼠标焦点事件就不会生效了。

项目开发中经常会遇到需要显示和隐藏DOM元素。常用的两个是display，visibility属性，高级点的会用到angularJS的ng-show,ng-if指令。

W3标准对这个两个属性的解释如下：

display 设置元素如何显示。

visibility 设置元素是否可见。

dispaly: none|inline|block

 - none: 此元素不会被显示。
 - inline: 默认。此元素会被显示为内联元素，元素前后没有换行符。
 - block: 此元素将显示为块级元素，此元素前后会带有换行符。

visibility: visible|hidden|collapse

 - visibile: 默认。元素框是可见的。
 - hidden: 元素框不可见，但仍然影响布局。
 - collapse: 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。
             被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，
             会呈现为 "hidden"。

两个属性都能控制元素显示和隐藏，他们之间的区别在于：

设置display : none 后，元素不再占据DOM文档流位置；
设置visibility : hidden 后，元素依旧占据DOM文档流。

我们写代码测试下：

use css dispaly
 
use css visibility

F12 打开控制台查看元素，很明显使用了visibility：hidden的元素还是占据了DOM位置，而display:none的元素则不占据文档位置。

再测试下ng-show, ng-if

use ng-show directive...
use ng-if directive...

结果如下：

ng-show : 实际是使用了display:none;

ng-if : 实际是remove相应的 DOM 节点

扩展下，在元素不可见的情况下，能不能触发标准的事件呢？比如，在页面加载完成后，触发focus事件。

$(":input").parent().css({"visibility" : "visible"});//11
$(":input").focus();//12

这段代码功能是在页面加载后，设置鼠标焦点到input框里面；实际测试这种场景可以正常使用。
但是 11,12行调换位置后，设置鼠标焦点事件就不会生效了。

专线服务超融合服务器 visible visibility displays Display

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49867.html

CSS魔法堂：display:none与visibility:hidden的恩怨情仇

摘要：不耽误表单提交数据虽然我们无法看到的元素，但当表单提交时依然会将隐藏的元素的值提交上去。让元素在见面上不可视，但保留元素原来占有的位置。不过由于各浏览器实现效果均有出入，因此一般不会使用这个值。继承父元素的值。前言还记得面试时被问起请说说display:none和visibility:hidden的区别吗？是不是回答完display:none不占用原来的位置，而visibilit...

selfimpr 2019-08-30 15:54 评论0 收藏0
【CSS】CSS 世界 -- 元素的显示与隐藏学习总结

摘要：应用场景用户上传头像，实时显示并裁减实现方式模块外部容器设置，剪裁区域里面放一个加载效果，设置。图片尺寸获取成功后，再正常初始化，然后让外部容器属性重置为。这样体验就会好很多，用户只会看到加载中剪裁界面，而不是占位界面加载中最终操作界面。一、Display 几种隐藏方式 1、希望元素不可见、不占据空间、辅助设备无法访问、不渲染使用标签：

wyk1184 2019-08-29 17:20 评论0 收藏0
display 与 visibility

摘要：项目开发中经常会遇到需要显示和隐藏元素。标准对这个两个属性的解释如下设置元素如何显示。此元素会被显示为内联元素，元素前后没有换行符。被行或列占据的空间会留给其他内容使用。但是行调换位置后，设置鼠标焦点事件就不会生效了。项目开发中经常会遇到需要显示和隐藏DOM元素。常用的两个是display，visibility属性，高级点的会用到angularJS的ng-show,ng-if指令。 ...

junfeng777 2019-08-30 13:07 评论0 收藏0
Better than yesterday-前端【display:none与visibility:h

display:none;与visibility:hidden; 相同点：两者都能实现元素的隐藏区别：display:none;元素并不会占据任何物理空间，但是visibility:hidden只是看不到，但是物理上还是存在的【也就是说如果使用display:none;原本该元素占用的空间会在页面布局上消失】实例： display:non...

jemygraw 2019-08-26 10:47 评论0 收藏0
visible选择器

摘要：由于的精简，以置于之前的的代码不能运行了，其中选择器就是其中一个。总结最终我选择了最后一种，功能能够满足现有的需求。其实很强大，这选择器只是其九牛一毛，后面可以再学习学习其思想。现在移动端项目在重构阶段，将之前的jQuery全部替换成Zepto了。由于Zepto的精简，以置于之前的jQuery的代码不能运行了，其中visible选择器就是其中一个。既然已经选择了Zepto，那就给Ze...

nanchen2251 2019-08-21 14:06 评论0 收藏0