Question

我有几个带有不同背景颜色的li标签。我想当用户单击每个li标签时，获取该特定项目的背景色并将其复制到剪贴板。

 $('li.col').click(function () {
    var x = $(this).css('backgroundColor');
})

我该怎么做？

Answer 1

到目前为止，您的方法是正确的。您可以使用copyToClipboard（我维护的项目/网站）中的30secondsofcode方法来解决此问题。从网站上：

创建一个新的<textarea>元素，用提供的数据填充并将其添加到HTML文档中。使用Selection.getRangeAt()存储所选范围（如果有）。使用document.execCommand('copy')复制到剪贴板。从HTML文档中删除<textarea>元素。最后，使用Selection().addRange()恢复原始选定范围（如果有）。

const copyToClipboard = str => {
  const el = document.createElement('textarea');
  el.value = str;
  el.setAttribute('readonly', '');
  el.style.position = 'absolute';
  el.style.left = '-9999px';
  document.body.appendChild(el);
  const selected =
    document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
  if (selected) {
    document.getSelection().removeAllRanges();
    document.getSelection().addRange(selected);
  }
};


$('li.col').click(function() {
  var x = $(this).css('backgroundColor');
  copyToClipboard(x);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="col" style="background:red;">Red</li>
  <li class="col" style="background:green;">Green</li>
  <li class="col" style="background:blue;">Blue</li>
</ul>

注意：我在Medium上写了一篇文章，对这一技术进行了更深入的解释。您可以阅读here。

将几个项目的背景色复制到剪贴板

1 个答案: