乐趣区

关于css:隐藏页面元素的第三种方式

jiezi

需要：暗藏页面元素

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