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

linong

image

我们先来说一下限制条件

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

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

实现隐藏页面元素

  1. 移动到屏幕外面,眼不见心不烦

    1. margin
    2. left + position
    3. transform:translate
  2. 使用特性

    1. display
    2. visibility
    3. opacity
    4. overflow:hidden + 0宽高
    5. transform:scale
    6. hidden 属性
  3. 移出 DOM 树,年轻人不讲武德

    1. 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)
}

留作业

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

如何隐藏页面元素?(扩展题)

  1. 可以使用 css、html、js

    1. (扩展)vue、react、angular 的方法也可以
  2. 元素为一个 100*100 的红色矩形,里面包含一个 50*50 黑色矩形
  3. 只要在页面上看不到就算隐藏
  4. (扩展)是否占据位置?如果占据位置的话,是否可以监听到事件?比如说 click 。

    1. 如果可以监听到事件,那么如何让他无法监听事件。
    2. 如果不可以监听到事件,那么如何让他监听到事件?如果无法实现请说明理由
  5. (扩展)是否存在于 DOM 树中?

    1. 比如说是否可以通过 children 获得?
    2. 比如说是否可以通过 querySelector 获得?
    3. 是否可以在开发者工具中看到?
  6. (扩展)是否触发回流(Layout)和重绘(Painting)?
阅读 1.1k

javascript-lNong
只此一生,何必从众

Read-Search-Ask

22.2k 声望
4.8k 粉丝
0 条评论

Read-Search-Ask

22.2k 声望
4.8k 粉丝
文章目录
宣传栏