资讯专栏INFORMATION COLUMN

display 与 visibility

junfeng777 / 2270人阅读

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

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

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

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

相关文章

  • CSS魔法堂:display:nonevisibility: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:nonevisibility: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条评论

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