咱们先来说一下限度条件

  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）？