面试题：使用 css 隐藏页面元素

Dec 3, 2020

思否

面试题 CSS Vue React JavaScript

转载自 SegmentFault

我们先来说一下限制条件

可以使用 css、html、js
元素为一个 100*100 的红色矩形，里面包含一个 50*50 黑色矩形
只要在页面上看不到就算隐藏

测试地址：https://www.lilnong.top/static/html/hidden-dom.html

实现隐藏页面元素

移动到屏幕外面，眼不见心不烦 margin

left + position
transform:translate

使用特性 display

visibility
opacity
overflow:hidden + 0宽高
transform:scale
hidden 属性

移出 DOM 树，年轻人不讲武德 removeChild

实现代码

.demo1{
    margin: -9999px 9999px 9999px -9999px;
}
.demo2{
    display: none;
}
.demo3{
    visibility: hidden;
}
.demo4{
    opacity: 0;
}
.demo5{
    width: 0;height: 0;border: none;outline: none;overflow: hidden;
}
.demo6{
    left: -9999px;top: -9999px;position: absolute;
}
.demo7{
    left: -9999px;top: -9999px;position: relative;
}
.demo8{
    left: -9999px;top: -9999px;position: fixed;
}
.demo9{
    transform: translate(-9999px, -9999px);
}
.demo10{
    transform: scale(0,0)
}

留作业

作业就留给你们啦，反正我这次不写（下次是什么时候我也不知道）。

如何隐藏页面元素？（扩展题）

可以使用 css、html、js （扩展）vue、react、angular 的方法也可以

元素为一个 100*100 的红色矩形，里面包含一个 50*50 黑色矩形
只要在页面上看不到就算隐藏

（扩展）是否占据位置？如果占据位置的话，是否可以监听到事件？比如说 click 。如果可以监听到事件，那么如何让他无法监听事件。

如果不可以监听到事件，那么如何让他监听到事件？如果无法实现请说明理由

（扩展）是否存在于 DOM 树中？比如说是否可以通过 children 获得？

比如说是否可以通过 querySelector 获得？
是否可以在开发者工具中看到？
（扩展）是否触发回流（Layout）和重绘（Painting）？

原文：SegmentFault

面试题：使用 css 隐藏页面元素

实现隐藏页面元素

实现代码

留作业

如何隐藏页面元素？（扩展题）

评论