[深圳|荣耀师兄]JS-王熠华|2019年06月17日的日报-技能树.IT修真院

发表于： 2019-06-17 21:04:58

1 850

今天完成了什么：

完成小课堂ppt；

遇到了什么问题：

暂无

今天收获了什么：

小课堂知识深刻理解。

当元素设置display:none后，界面上将不会显示该元素，并且该元素不占布局空间，但我们仍然可以通过JavaScript操作该元素。

1.原生默认display:none的元素

其实浏览器原生元素中有不少自带display:none的元素，如link,script,style,dialog,input[type=hidden]等.

2.HTML5中新增hidden布尔属性，让开发者自定义元素的隐藏性

<body>
<p>只有这个段落没有被隐藏</p>
<p hidden>这个段落被隐藏了，页面上不会显示</p>
<p hidden="">这个段落被隐藏了，页面上不会显示</p>
<p hidden="hidden">这个段落被隐藏了，页面上不会显示</p>
<p hidden="true">这个段落被隐藏了，页面上不会显示</p>
<p hidden="false">这个段落被隐藏了，页面上不会显示</p>
<!-- HTML5中新增hidden布尔属性，让开发者自定义元素的隐藏性 -->
</body>

3.父元素为display:none，子孙元素也难逃一劫

<style>
.hidden{
display: none;
}
.visible{
display: block;
}
</style>
</head>
<body>
<div class="hidden">
I'm parent!
<div class="visible"> I'm son! </div>
</div>
滴滴答
</body>

4.无法获取焦点，

盒子什么都没。鼠标获取不了

<body>

<input type="hidden">
<div tabindex="1" style="display:none">hidden</div>

<!-- 真心不会获得焦点 -->
</body>

5.无法响应任何事件，无论是捕获、命中目标和冒泡阶段均不可以。

由于display:none的元素根本不会在界面上渲染，就是连1个像素的都不占，因此自然无法通过鼠标点击命中，而元素也无法获取焦点，那么也不能成为键盘事件的命中目标；而父元素的display为none时，子元素的display必定为none，因此元素也没有机会位于事件捕获或冒泡阶段的路径路径上，因此display:none的元素无法响应事件。

6.不耽误form表单提交数据

<form>

<input type="hidden" name="id">
<input type="text"  value="1今天天气" name="gguid"style="display:none"  >
<button>提交</button>
</form>
<!--不耽误form表单提交数据  -->

7.CSS中的counter会忽略display:none的元素

<style>
.start{
counter-reset: son 0;
}
.son{
counter-increment: son 1;
}
.son::before{
content: counter(son) ". ";
/* 计数器 */
}
</style>
</head>
<body>
<div class="start">
<div class="son">son1</div>
<div class="son" style="display:none">son2</div>
<div class="son">son3</div>
<div class="son">son4</div>
<div class="son">son5</div>
<div class="son">son6</div>

</div>
</body>

8.Transition对display的变化不感冒

9.display变化时将触发reflow
撇开display:none，我们看看display:block表示元素位于BFC中，而display:inline则表示元素位于IFC中，也就是说display的用于就是设置元素所属的布局上下文，若修改display值则表示元素采用的布局方式已发生变化，

visibility

visibility有两个不同的作用

用于隐藏表格的行和列

用于在不触发布局的情况下隐藏元素

4个有效值

1.visible

没什么好说的，就是在界面上显示。

2.hidden

让元素在见面上不可视，但保留元素原来占有的位置。

3.collapse

用于表格子元素(如tr,tbody,col,colgroup)时效果和display:none一样，用于其他元素上时则效果与visibility:hidden一样。不过由于各浏览器实现效果均有出入，因此一般不会使用这个值。

4.inherit

继承父元素的visibility值。

对比display：none区别：

1.vistibility子元素设置hidden属性生效

<style>
div{
border: solid 2px blue;
}
.visible{
visibility: visible;
}
.hidden{
visibility: hidden;
}
</style>
</head>
<body>

<div class="hidden">
我是父元素
<div class="visible">
我是子元素
</div>
</div>

</body>

2.和displaynone一样无法获得焦点

3.可在冒泡阶段响应事件
由于设置为visibility:hidden的元素其子元素可以为visibility:visible，因此隐藏的元素有可能位于事件冒泡的路径上因此下面代码中，将鼠标移至.visible时，.hidden会响应hover事件显示。

<Style>
div{
border: solid 2px blue;
}
.visible{
visibility: visible;
}
.hidden{
visibility: hidden;
}
.hidden:hover{
visibility: visible;
}
</Style>
</head>
<body>
<div class="hidden">
I'm Parent.
<div class="visible">
I'm Son.
</div>
</div>
<!-- 隐藏的元素有可能位于事件冒泡的路径上因此在上面代码中，将鼠标移至.visible时，.hidden会响应hover事件显示。 -->
</body>