需要：暗藏页面元素

如果从该需要的字面意思下手最简略的形式是什么？
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>
// javascripthandleClick = (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; 也无奈实现成果？