如何在单击时将 div 元素的 background-color 复制到剪贴板？

Question

基本上就是标题。我有 4 个 div，代表某物的主要 4 种颜色，它们是动态显示的，所以它们会有所不同。我想对它们做的是，当您单击它时将 background-color（十六进制）复制到剪贴板，并显示一条消息，显示“已复制！” 1.5秒后淡出

Answer 1

我建议您展示您尝试过的内容或至少展示您的代码的样子。您可以使用 javascript 中的 .execCommand() 方法（或类似方法）来实现此目的。您很可能会发现此 link 很有帮助。 https://alligator.io/js/copying-to-clipboard/

Answer 2

首先让我们假设 div 有一个 id test，所以我们可以得到元素。

const el = document.getElementById('test');

您可能想使用 class 名称、标签名称等来获取它，但这完全取决于您。

然后我们得到计算出的背景颜色：

let bgColor = window.getComputedStyle(el).backgroundColor;

现在我们需要创建一个文本。然后 select 文本并将其复制到剪贴板：

let text = document.createElement('textarea');

// We don't want to see it on the page but only use it as a text holder for the moment
text.style.display = 'none';

// Append to document
document.body.appendChild(text);

// Set the background colour to it
text.value = bgColor;

// Select the text
text.select();

// Copy the text we just selected
document.execCommand('copy');

// Remove the textarea we just created
document.body.removeChild(text);

如何在单击时将 div 元素的 background-color 复制到剪贴板？

How to copy the background-color of a div element to the clipboard on click?

javascript

clipboarddata