实现原理
1. 遍历全文的pre标签，将其设置为相对定位relative
2. 创建一个复制按钮 document.createElement("button")，样式为绝对定位absolute到右上角【使用了子绝父相的定位】，点击按钮时将pre标签内code标签的innerText复制到剪贴板，同时按钮的innerHTML变为“复制成功”，1s后恢复为“复制”
3. 将复制按钮添加到pre标签中 appendChild(copyButton)
完整代码
[...document.getElementsByTagName("pre")].forEach(item => { item.style.position = "relative"; let copyButton = document.createElement("button") copyButton.style.cssText = 'border-radius: 4px;position:absolute;right:10px;top:10px;cursor: pointer' copyButton.innerHTML = "复制"; copyButton.onclick = function () { let copyData = item.firstChild.innerText copyToClipboard(copyData) copyButton.innerHTML = "复制成功"; setTimeout(function() { copyButton.innerHTML = "复制"; }, 1000); } item.appendChild(copyButton) });
// js 复制到剪贴板 function copyToClipboard(content) { if (window.clipboardData) { window.clipboardData.setData('text', content); } else { (function (content) { document.oncopy = function (e) { e.clipboardData.setData('text', content); e.preventDefault(); document.oncopy = null; } })(content); document.execCommand('Copy'); } }
