资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/display 与 visibility

display 与 visibility

junfeng777 / 2260人阅读

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

项目开发中经常会遇到需要显示和隐藏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行调换位置后，设置鼠标焦点事件就不会生效了。

云服务器 GPU云服务器 visible visibility displays Display

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

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

相关文章

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

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

    selfimpr 评论0 收藏0

  • 【CSS】CSS 世界 -- 元素的显示与隐藏学习总结

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

    wyk1184 评论0 收藏0

  • display 与 visibility

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

    leanote 评论0 收藏0

  • Better than yesterday-前端【display:none与visibility:h

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

    jemygraw 评论0 收藏0

  • visible选择器

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

    nanchen2251 评论0 收藏0

发表评论

登陆后可评论

0条评论

junfeng777

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<