博客园如何自定义添加复制按钮?
//添加复制按钮
这是js部分
<script> let cnblogs_code = document.querySelectorAll('.cnblogs_code') for(let i=0;i<cnblogs_code.length;i++){
let copy_li = document.createElement('div')
//因为我添加了一个类名,所以下面的js添加样式可以加到.copy.btn类里,我懒的改 copy_li.classList.add('copy_btn'); copy_li.style.position = 'absolute'; copy_li.style.right = '10px' copy_li.style.top = '10px' copy_li.style.textAlign = 'center' copy_li.innerText = '复制' copy_li.style.padding = '0px 10px'; copy_li.style.height = '24px'; copy_li.style.lineHeight = '26px'; copy_li.style.cursor = 'pointer' cnblogs_code[i].appendChild(copy_li) copy_li.addEventListener("click",()=>{ let p = cnblogs_code[i].querySelector('pre')
//获取标签里的文本内容 let textValue =p.innerText
//创建input标签元素 let inputV = document.createElement('input')
//给input框赋值 inputV.value = textValue
//将input添加到body标签里 document.body.appendChild(inputV);
//选中文本内容 inputV.select();
//复制 let result = document.execCommand('Copy'); if(result){ copy_li.innerText = '复制成功' }
//删除input标签 inputV.remove() }) }
</script>
//这是css部分
<style>
.cnblogs_code{
position: relative;
}
.copy_btn{
font-size: 16px;
box-shadow: 0 2px 4px rgb(0 0 0 / 5%), 0 2px 4px rgb(0 0 0 / 5%);
color: #fffefe;
#cbb8b8 !important;
border-radius: 4px;
}
</style>
浙公网安备 33010602011771号