统计
  • 建站日期:2022-12-01
  • 文章总数:5933 篇
  • 评论总数:34324 条
  • 分类总数:14 个
  • 最后更新:3月31日
文章 网页代码

JS给网站博客代码快添加一键复制按钮(js点击就把内容复制出来)

首页 > 网页代码 > 正文
JS给网站博客代码快添加一键复制按钮(js点击就把内容复制出来)-酷库博客-第4张图片

JS给网站博客代码快添加一键复制按钮(js点击就把内容复制出来)当鼠标移到代码块,就显示复制按钮,离开就消失,此方法可用于简洁主题代码块的复制。

演示图

JS给网站博客代码快添加一键复制按钮(js点击就把内容复制出来)-酷库博客-第5张图片

1.遍历全文的pre标签,将其设置为相对定位relative
2.创建一个复制按钮 document.createElement("button"),样式为绝对定位absolute到右上角【使用了子绝父相的定位】,点击按钮时将pre标签内code标签的innerText复制到剪贴板,同时按钮的innerHTML变为“复制成功”,1s后恢复为“复制”
3.将复制按钮添加到pre标签中 appendChild(copyButton)

文章回复-酷库博客.png
此处内容已隐藏,评论后刷新即可查看!

免责申明
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集整理,如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!
03月07日_星期二_在这里每天60秒读懂世界!
« 上一篇 03月07日
运动世界校园跑步(运动世界校园app如何作弊刷跑步)
下一篇 » 03月07日
为了防止灌水评论,登录后即可评论!
注册登录

已有 3 条评论

  1. cLnsHMTc Lv.2
    约 21 小时前 安徽省合肥市 电信

    说道:学习学习

    1. PPBsIH4g Lv.4
      2023-03-22 15:11 安徽省阜阳市 电信

      说道:学习学习

      1. 2023-03-11 16:22 广西南宁市 电信

        说道:学习学习

        HI ! 请登录
        注册会员,享受下载全站资源特权。

        最新文章

        本周热门


        登陆
        还没有账号?立即注册
        点击按钮进行验证
        登陆
        忘记密码
        已经有账号?马上登陆
        获取验证码
        重新获取(60s)
        点击按钮进行验证
        重置密码
        注册
        已经有账号?马上登陆 获取邀请码
        点击按钮进行验证
        立即注册