javascript - 如何动态使用 Clipboard.js 和背景颜色？

Question

我有一个按钮:

<button class="badge" style="background-color: #ff3333;" data-clipboard-target="#badge">RED</button>

我想使用 Clipboard.js 复制颜色。我知道我可以使用 data-clipboard-target 手动执行此操作，但我希望使用类似 their sample code 动态触发事件:

new ClipboardJS('.btn', {
text: function(trigger) {
    return trigger.getAttribute('aria-label');
}};

我尝试使用大约 100 种变体:

 new ClipboardJS(".badge", {
  text: function(trigger) {
    return $(trigger).closest(".badge").element.style.backgroundColor(); 
  }
});

但我不断收到错误:未捕获类型错误:无法读取未定义的属性“样式”。

我意识到我可以使用 data-clipboard-target 并手动执行此操作，但我希望找出定位关闭的原因。谢谢

Answer 1

您必须设置data-clipboard-text，然后在文本函数中返回要复制的文本。您还可以使用 trigger.style.backgroundColor 来获取背景颜色。

new ClipboardJS(".badge", {
  text: function(trigger) {
    var result = trigger.style.backgroundColor
    return console.log(result) || result
  }
});

<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="badge" style="background-color: #ff3333;" data-clipboard-text="">RED</button>