如何動態使用Clipboard.js和背景色？

Question

我有一個按鈕：

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

我想復制使用Clipboard.js的顏色。 我了解我可以使用data-clipboard-target手動執行此操作，但我希望使用其示例代碼來動態觸發事件：

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(); 
  }
});

但我不斷收到錯誤： Uncaught TypeError: Cannot read property 'style' of undefined 。

我意識到我可以只使用data-clipboard-target並手動執行此操作，但我希望弄清楚為什么關閉了目標。 謝謝

Answer 1

您必須設置data-clipboard-text ，然后在text function返回要復制的text function 。 您也可以使用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>