display 的属性和 visibility 的对比
display 的属性可以有 block, inline, none.
display 的 block 属性
block 属性表示标签会占用整行, 相邻两个 block 标签会自动换行. 使用 block 的标签有
- p
- h1 - h6
- - p
- - form
- - header
- - footer
- - section
display 的 inline 属性
inline 属性不会单独占用整行, 而且只会使用必须的宽度. 使用 inline 的标签有
- - span
- - a
- - img
display 的 none 属性
display 的 none 属性常用在和 js 合用隐藏标签内容, 或展现标签内容, 页面不用重新创建标签. 一般 script 标签默认使用的 display=none 属性
display=none 和 visibility=hidden 的对比
display=none 不用占用标签位置, 而 visibility=hidden 会留有标签位置.
使用函数控制隐藏元素
- function hide(e, reflow) {
- if (reflow) {
- e.style.display = "none"; // 将 e 隐藏, 所占控件也隐藏
- } else {
- e.style.visibility = "hidden"; // 将 e 隐藏, 保留所占空间
- }
- }
来源: https://www.2cto.com/kf/201804/738037.html