隐藏页面元素的第三种方式

需求：隐藏页面元素

如果从该需求的字面意思下手最简单的方式是什么？
selector { opacity: 0; }
难道不是么？简单粗暴。

但是实际需求通常都会在该需求的基础上附加额外需求。比如：

• 隐藏页面元素并仍然在页面中占有位置。
• 隐藏页面元素并不在页面中占有位置。
• 实现点击按钮复制页面元素内容到剪切板。
  前两个需求比较常见，那这第三个需求是什么东东？和隐藏页面元素又有什么关系？

常见的隐藏页面元素方式及差异

• visibility: hidden;
• display: none;

差异：

• visibility: hidden; 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
• display: none; 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

隐藏页面元素的第三种方式

在日常开发中经常需要去百度问题，也经常需要 ctrl + c 别人的代码。所以现在的大部分博客网站都支持代码的一键复制功能。

该功能的大体思路是：

1. 在页面中添加一个隐藏的文本区域；
2. 使用 JavaScript 获取到需要复制的文本值并赋值给上一步创建的文本域；
3. 使用 select() 选中文本域的内容；
4. 使用原生接口 document.execCommand('copy'); 进行复制即可；

想要实现第一步的隐藏文本域功能，如果使用 visibility: hidden; 或者 display: none; 都可以实现基本的隐藏功能，但是无法实现一键复制功能。

核心思想

实现该功能的重点在于使用定位和 opacity 属性

selector {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -10;
}

具体代码

下面是具体的实现代码：

/* html */
<div class="parent">
  <textarea id="input"></textarea>12
  <div class="child" onclick="handleClick(event)" onmouseleave="handleMouseLeave(event)">
    <span>Copy</span>
  </div>
</div>

// javascript
handleClick = (event) => {
  console.log('复制成功')
  var text = event.target.innerText
  var input = document.getElementById('input')
  input.value = text
  input.select()
  document.execCommand('copy')
  event.target.innerText = 'Success'
}

handleMouseLeave = (event) => {
  event.target.innerText = 'Copy'
}

//css
*, html, body {
  padding: 0;
  margin: 0 auto;
}

.parent {
  position: relative;
  height: 200px;
  width: 200px;
  border: 1px solid #81D8D0;
}

.child {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  height: 100px;
  width: 100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #9C27B0;
  cursor: pointer;
}

#input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -10;
}

思考

• 为什么使用 display 和 visibility 属性无法实现效果？
• 为什么直接使用 opacity: 0; 也无法实现效果？