利用Jquery实现点击元素后复制被点击元素的标签

在博客上放了一个“Fontawesome4.7.0图标一览”的页面，一直觉得功能太过于单一。自己使用当中，遇到合适的图标，往往还需要去获取它的html标签属性。所以就想给这个页面增加一个点击后复制被点击元素标签的功能。

获取标签的相关指令

outerHTML：可以用来更改或获取元素内所有的html和文本内容，包含引用该方法元素自身的标签；

innerHTML：是用来获取元素内的html内容和文本；

innerText：只获取元素内的文本内容，html标签将被忽略。

浏览器剪贴板的复制指令

浏览器剪贴板的复制指令会复制当前页面中被选中的内容，而不是被点击的内容。查了一下百度，发现比较常见的做法是获取到需要的内容，将其赋值给一个输入框，然后选中输入框中的内容，再执行如下命令。

document.execCommand('copy');

上述命令会复制我们自定义的输入框中的内容，执行完毕后输入框就可以功成身退了。

修改元素的css样式

不准备用弹窗的方式来通知用户复制成功，这样会强迫用户去关闭弹窗，反而增加了操作的步骤。所以就采用了被点击后修改被点击元素的背景色的方式来提醒用户已经复制。

element.setAttribute('style','background:red');

完整的代码

$(function(){
var last='';
$('ul i.fa').on('click',function(){
    let textarea=document.createElement('textarea');
    if(!last==''){
        last.setAttribute('style','');
    }
    textarea.value = this.outerHTML;
    document.body.appendChild(textarea);
    textarea.select();
    if(document.execCommand){
        document.execCommand('copy');
        last=this;
        last.setAttribute('style','background:red');
        console.log(this);
    }
    document.body.removeChild(textarea);    
});
});