我有几个具有不同背景颜色的li标记。我想当用户点击每个li标签时，获取特定项目的背景颜色并将其复制到剪贴板。
li
$('li.col').click(function () { var x = $(this).css('backgroundColor'); })
我怎么能这么做？
到目前为止你的方法是正确的。您可以使用30secondsofCode（我维护的一个项目/网站）中的copytoclipboard方法来处理这个问题。来自网站：
copytoclipboard
创建一个新的</code>元素，用提供的数据填充它并将其添加到HTML文档中。使用<code>selection.getrangeat()</code>存储所选范围（如果有）。使用<code>document.execcommand('copy')</code>复制到剪贴板。从HTML文档中删除<code><textarea></code>元素。最后，使用<code>selection().addrange()</code>恢复原始选定范围（如果有）。</p><p>null</p><pre class="snippet-code-js lang-js prettyprint-override"><code>const copyToClipboard = str => { const el = document.createElement('textarea'); el.value = str; el.setAttribute('readonly', ''); el.style.position = 'absolute'; el.style.left = '-9999px'; document.body.appendChild(el); const selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false; el.select(); document.execCommand('copy'); document.body.removeChild(el); if (selected) { document.getSelection().removeAllRanges(); document.getSelection().addRange(selected); } }; $('li.col').click(function() { var x = $(this).css('backgroundColor'); copyToClipboard(x); })</code></pre><pre class="snippet-code-html lang-html prettyprint-override"><code><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="col" style="background:red;">Red</li> <li class="col" style="background:green;">Green</li> <li class="col" style="background:blue;">Blue</li> </ul></code></pre> </p> <div style="font-size:12px"> </div> </div> </div> </div> <div class="ui segment" style="margin-top:20px;"> <h2 class="pt-2">相关问题</h2> <br> <div> <ul style="font-size:16px;"> <li style="line-height:30px;"><a href="/questions/402602" title="Android：在模块jefied-play-services-测量和jefied-play-services-测量-impl中发现重复类" target="_blank">Android：在模块jefied-play-services-测量和jefied-play-services-测量-impl中发现重复类</a></li> <li style="line-height:30px;"><a href="/questions/402595" title="如何防止对数组中类对象的重复引用？" target="_blank">如何防止对数组中类对象的重复引用？</a></li> <li style="line-height:30px;"><a href="/questions/402566" title="组件中的Angular 2重复订阅" target="_blank">组件中的Angular 2重复订阅</a></li> <li style="line-height:30px;"><a href="/questions/402544" title="检测变化@角度[重复]中的输入绑定" target="_blank">检测变化@角度[重复]中的输入绑定</a></li> <li style="line-height:30px;"><a href="/questions/402543" title="angular2@input-更改检测[重复]" target="_blank">angular2@input-更改检测[重复]</a></li> <li style="line-height:30px;"><a href="/questions/402486" title="我们需要在Angular中取消订阅超文本传输协议调用吗？[重复]" target="_blank">我们需要在Angular中取消订阅超文本传输协议调用吗？[重复]</a></li> <li style="line-height:30px;"><a href="/questions/402462" title="在-O0 vs-O3中__rdtsc（）的汇编代码[重复]" target="_blank">在-O0 vs-O3中__rdtsc（）的汇编代码[重复]</a></li> <li style="line-height:30px;"><a href="/questions/402391" title="mvn干净包不起作用，缺少项目" target="_blank">mvn干净包不起作用，缺少项目</a></li> <li style="line-height:30px;"><a href="/questions/402378" title="Gradle不包含要jar的资源文件夹[重复]" target="_blank">Gradle不包含要jar的资源文件夹[重复]</a></li> <li style="line-height:30px;"><a href="/questions/402362" title="将Gradle项目导入Eclipse时出错" target="_blank">将Gradle项目导入Eclipse时出错</a></li> <li style="line-height:30px;"><a href="/questions/402338" title="线程“main”java. lang.NoClassDefFoundError中的异常：org/apache/log4j/LogManager[重复]" target="_blank">线程“main”java. lang.NoClassDefFoundError中的异常：org/apache/log4j/LogManager[重复]</a></li> <li style="line-height:30px;"><a href="/questions/402315" title="如何将gradle添加到子项目根项目作为依赖项？" target="_blank">如何将gradle添加到子项目根项目作为依赖项？</a></li> <li style="line-height:30px;"><a href="/questions/402303" title="为什么在发生哈希冲突并且Hashmap不允许重复元素时需要linkedlist？" target="_blank">为什么在发生哈希冲突并且Hashmap不允许重复元素时需要linkedlist？</a></li> <li style="line-height:30px;"><a href="/questions/402297" title="Gradle如何在子父结构中设置项目" target="_blank">Gradle如何在子父结构中设置项目</a></li> <li style="line-height:30px;"><a href="/questions/402296" title="GradleBOM项目" target="_blank">GradleBOM项目</a></li> <li style="line-height:30px;"><a href="/questions/402295" title="Spring Boot-Gradle-Eclipse项目" target="_blank">Spring Boot-Gradle-Eclipse项目</a></li> <li style="line-height:30px;"><a href="/questions/402294" title="如何在Gradle中将根项目添加为类路径" target="_blank">如何在Gradle中将根项目添加为类路径</a></li> <li style="line-height:30px;"><a href="/questions/402288" title="如何修复错误java. lang.ClassNotFoundException：com.mysql.jdbc.Driver[重复]" target="_blank">如何修复错误java. lang.ClassNotFoundException：com.mysql.jdbc.Driver[重复]</a></li> <li style="line-height:30px;"><a href="/questions/402285" title="如何查看为C函数生成的汇编代码？[重复]" target="_blank">如何查看为C函数生成的汇编代码？[重复]</a></li> <li style="line-height:30px;"><a href="/questions/402272" title="PoolingHttpClientConnectionManager不重复使用现有的空闲连接" target="_blank">PoolingHttpClientConnectionManager不重复使用现有的空闲连接</a></li> </ul> </div> <br> </div> </div> <div class="col-md-4" style="height: auto !important; min-height: 0px !important;"> <div class="ui segment"> <h5>热门标签</h5> <hr> <a href="/questions/tag/1" title="Java" class="tags" style="margin:0 5px 5px 0">Java</a> <a href="/questions/tag/2" title="" class="tags" style="margin:0 5px 5px 0">JavaScript</a> <a href="/questions/tag/3" title="Python" class="tags" style="margin:0 5px 5px 0">Python</a> <a href="/questions/tag/4" title="PHP" class="tags" style="margin:0 5px 5px 0">PHP</a> <a href="/questions/tag/5" title="C#" class="tags" style="margin:0 5px 5px 0">C#</a> <a href="/questions/tag/6" title="Android" class="tags" style="margin:0 5px 5px 0">Android</a> <a href="/questions/tag/7" title="Html" class="tags" style="margin:0 5px 5px 0">Html</a> <a href="/questions/tag/8" title="jQuery" class="tags" style="margin:0 5px 5px 0">jQuery</a> <a href="/questions/tag/9" title="C++" class="tags" style="margin:0 5px 5px 0">C++</a> <a href="/questions/tag/10" title="Css" class="tags" style="margin:0 5px 5px 0">Css</a> <a href="/questions/tag/11" title="IOS" class="tags" style="margin:0 5px 5px 0">IOS</a> <a href="/questions/tag/12" title="MySQL" class="tags" style="margin:0 5px 5px 0">MySQL</a> <a href="/questions/tag/13" title="NodeJS" class="tags" style="margin:0 5px 5px 0">NodeJS</a> </div> </div> </div> </div> <script src="https://my.openwrite.cn/js/readmore.js" type="text/javascript"></script> <script> const btw = new BTWPlugin(); btw.init({ id: 'yArticle', blogId: '19381-1596467390161-874', name: '锋哥聊编程', qrcode: 'http://www.yiidian.com/statics/images/qywx.png', keyword: '1024', }); // 调整显示内容 var rm_btn = $("#read-more-btn"); rm_btn.html('~阅读全文~人机检测~'); </script> <script type="text/javascript" src="http://www.yiidian.com/api.php?op=count&id=40452&module=zsask"></script> <footer> <div class="deanfooter"> <div class="deanfttop nav-bar"> <div class="deanw1180"> <div class="deanlinks"> <ul> <li style="width:280px;"> <p>常见技术问题</p> <a href="/questions/402602" title="Android：在模块jefied-play-services-测量和jefied-play-services-测量-impl中发现重复类" target="_blank">Android：在模块jefied-play-ser...</a> <a href="/questions/402601" title="HashMap如何跟踪entrySet等字段" target="_blank">HashMap如何跟踪entrySet等字段</a> <a href="/questions/402600" title="在Hashmap中查找匹配的键/值对" target="_blank">在Hashmap中查找匹配的键/值对</a> <a href="/questions/402599" title="如何迭代Hashmap并与同一Hashmap中的其他键进行组合以比较它们的对象" target="_blank">如何迭代Hashmap并与同一Hashmap...</a> <a href="/questions/402598" title="HashCode-如果相等的对象碰巧在同一个桶中散列会发生什么？" target="_blank">HashCode-如果相等的对象碰巧在...</a> <a href="/questions/402597" title="Java哈希码和桶大小-关系" target="_blank">Java哈希码和桶大小-关系</a> </li> <li> <p>常用工具</p> <a href="http://www.yiidian.com/blog/notes/" target="_blank">编程笔记</a> <a href="http://www.yiidian.com/blog/interview/" target="_blank">编程面试题</a> <a href="http://www.yiidian.com/java_jar" target="_blank">Java Jar包下载</a> <a href="http://c.yiidian.com/" target="_blank">在线工具</a> <a href="http://layui.yiidian.com/" target="_blank">LayUI镜像站点</a> <a href="http://www.yiidian.com/bysj_doc/">毕设文档下载</a> </li> <li> <p>站点信息</p> <a href="/site/about_us/" target="_blank">关于我们</a> <a href="/site/disclaimer/" target="_blank">免责声明</a> <a href="/tags" target="_blank">网站标签</a> </li> </ul> </div> <div class="deanspread"> <p>关注站长公众号：锋哥聊编程</p> <div class="deanweixin"> <img src="/statics/images/ydjc-wx.png"> <p>锋哥聊编程</p> </div> </div> <div class="clear"></div> </div> </div> <div class="deanofficial"> Copyright © 2017-2022 一点教程. All Rights Reserved. <br/>备案号：<a href="https://beian.miit.gov.cn/" target="_blank"><font color="white">粤ICP备17065202号-3</font></a> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?5680e7b580ba668dd42e343252481189"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> $(function(){ $.getJSON("http://www.yiidian.com/checklogin", function(data){ if(data.flag){ $('.no-login').hide(); $('.has-login').show(); $('#username').html(""+data.username); }else{ $('.no-login').show(); $('.has-login').hide(); } }); }); </script> </footer> <div class="fixed-btn nav-bar"> <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a> <a class="qrcode" href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a> <a class="writer" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1014671449&site=qq&menu=yes" style="font-size: 12px;" title="QQ客服"><i class="fa fa-qq" style="font-size: 20px;"></i></a> <!-- qrcode modal --> <div id="bottom-qrcode" class="modal panel-modal hide fade in"> <h4>微信关注</h4> <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.yiidian.com/statics/images/qrcode.png"></div> </div> </div> <script src="http://www.yiidian.com/statics/js/main.js"></script> <!--<![endif]--> <script src="http://www.yiidian.com/statics/js/amazeui.js"></script> </body> </html>
</code>元素，用提供的数据填充它并将其添加到HTML文档中。使用<code>selection.getrangeat()</code>存储所选范围（如果有）。使用<code>document.execcommand('copy')</code>复制到剪贴板。从HTML文档中删除<code><textarea></code>元素。最后，使用<code>selection().addrange()</code>恢复原始选定范围（如果有）。</p><p>null</p><pre class="snippet-code-js lang-js prettyprint-override"><code>const copyToClipboard = str => { const el = document.createElement('textarea'); el.value = str; el.setAttribute('readonly', ''); el.style.position = 'absolute'; el.style.left = '-9999px'; document.body.appendChild(el); const selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false; el.select(); document.execCommand('copy'); document.body.removeChild(el); if (selected) { document.getSelection().removeAllRanges(); document.getSelection().addRange(selected); } }; $('li.col').click(function() { var x = $(this).css('backgroundColor'); copyToClipboard(x); })</code></pre><pre class="snippet-code-html lang-html prettyprint-override"><code><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="col" style="background:red;">Red</li> <li class="col" style="background:green;">Green</li> <li class="col" style="background:blue;">Blue</li> </ul></code></pre> </p> <div style="font-size:12px"> </div> </div> </div> </div> <div class="ui segment" style="margin-top:20px;"> <h2 class="pt-2">相关问题</h2> <br> <div> <ul style="font-size:16px;"> <li style="line-height:30px;"><a href="/questions/402602" title="Android：在模块jefied-play-services-测量和jefied-play-services-测量-impl中发现重复类" target="_blank">Android：在模块jefied-play-services-测量和jefied-play-services-测量-impl中发现重复类</a></li> <li style="line-height:30px;"><a href="/questions/402595" title="如何防止对数组中类对象的重复引用？" target="_blank">如何防止对数组中类对象的重复引用？</a></li> <li style="line-height:30px;"><a href="/questions/402566" title="组件中的Angular 2重复订阅" target="_blank">组件中的Angular 2重复订阅</a></li> <li style="line-height:30px;"><a href="/questions/402544" title="检测变化@角度[重复]中的输入绑定" target="_blank">检测变化@角度[重复]中的输入绑定</a></li> <li style="line-height:30px;"><a href="/questions/402543" title="angular2@input-更改检测[重复]" target="_blank">angular2@input-更改检测[重复]</a></li> <li style="line-height:30px;"><a href="/questions/402486" title="我们需要在Angular中取消订阅超文本传输协议调用吗？[重复]" target="_blank">我们需要在Angular中取消订阅超文本传输协议调用吗？[重复]</a></li> <li style="line-height:30px;"><a href="/questions/402462" title="在-O0 vs-O3中__rdtsc（）的汇编代码[重复]" target="_blank">在-O0 vs-O3中__rdtsc（）的汇编代码[重复]</a></li> <li style="line-height:30px;"><a href="/questions/402391" title="mvn干净包不起作用，缺少项目" target="_blank">mvn干净包不起作用，缺少项目</a></li> <li style="line-height:30px;"><a href="/questions/402378" title="Gradle不包含要jar的资源文件夹[重复]" target="_blank">Gradle不包含要jar的资源文件夹[重复]</a></li> <li style="line-height:30px;"><a href="/questions/402362" title="将Gradle项目导入Eclipse时出错" target="_blank">将Gradle项目导入Eclipse时出错</a></li> <li style="line-height:30px;"><a href="/questions/402338" title="线程“main”java. lang.NoClassDefFoundError中的异常：org/apache/log4j/LogManager[重复]" target="_blank">线程“main”java. lang.NoClassDefFoundError中的异常：org/apache/log4j/LogManager[重复]</a></li> <li style="line-height:30px;"><a href="/questions/402315" title="如何将gradle添加到子项目根项目作为依赖项？" target="_blank">如何将gradle添加到子项目根项目作为依赖项？</a></li> <li style="line-height:30px;"><a href="/questions/402303" title="为什么在发生哈希冲突并且Hashmap不允许重复元素时需要linkedlist？" target="_blank">为什么在发生哈希冲突并且Hashmap不允许重复元素时需要linkedlist？</a></li> <li style="line-height:30px;"><a href="/questions/402297" title="Gradle如何在子父结构中设置项目" target="_blank">Gradle如何在子父结构中设置项目</a></li> <li style="line-height:30px;"><a href="/questions/402296" title="GradleBOM项目" target="_blank">GradleBOM项目</a></li> <li style="line-height:30px;"><a href="/questions/402295" title="Spring Boot-Gradle-Eclipse项目" target="_blank">Spring Boot-Gradle-Eclipse项目</a></li> <li style="line-height:30px;"><a href="/questions/402294" title="如何在Gradle中将根项目添加为类路径" target="_blank">如何在Gradle中将根项目添加为类路径</a></li> <li style="line-height:30px;"><a href="/questions/402288" title="如何修复错误java. lang.ClassNotFoundException：com.mysql.jdbc.Driver[重复]" target="_blank">如何修复错误java. lang.ClassNotFoundException：com.mysql.jdbc.Driver[重复]</a></li> <li style="line-height:30px;"><a href="/questions/402285" title="如何查看为C函数生成的汇编代码？[重复]" target="_blank">如何查看为C函数生成的汇编代码？[重复]</a></li> <li style="line-height:30px;"><a href="/questions/402272" title="PoolingHttpClientConnectionManager不重复使用现有的空闲连接" target="_blank">PoolingHttpClientConnectionManager不重复使用现有的空闲连接</a></li> </ul> </div> <br> </div> </div> <div class="col-md-4" style="height: auto !important; min-height: 0px !important;"> <div class="ui segment"> <h5>热门标签</h5> <hr> <a href="/questions/tag/1" title="Java" class="tags" style="margin:0 5px 5px 0">Java</a> <a href="/questions/tag/2" title="" class="tags" style="margin:0 5px 5px 0">JavaScript</a> <a href="/questions/tag/3" title="Python" class="tags" style="margin:0 5px 5px 0">Python</a> <a href="/questions/tag/4" title="PHP" class="tags" style="margin:0 5px 5px 0">PHP</a> <a href="/questions/tag/5" title="C#" class="tags" style="margin:0 5px 5px 0">C#</a> <a href="/questions/tag/6" title="Android" class="tags" style="margin:0 5px 5px 0">Android</a> <a href="/questions/tag/7" title="Html" class="tags" style="margin:0 5px 5px 0">Html</a> <a href="/questions/tag/8" title="jQuery" class="tags" style="margin:0 5px 5px 0">jQuery</a> <a href="/questions/tag/9" title="C++" class="tags" style="margin:0 5px 5px 0">C++</a> <a href="/questions/tag/10" title="Css" class="tags" style="margin:0 5px 5px 0">Css</a> <a href="/questions/tag/11" title="IOS" class="tags" style="margin:0 5px 5px 0">IOS</a> <a href="/questions/tag/12" title="MySQL" class="tags" style="margin:0 5px 5px 0">MySQL</a> <a href="/questions/tag/13" title="NodeJS" class="tags" style="margin:0 5px 5px 0">NodeJS</a> </div> </div> </div> </div> <script src="https://my.openwrite.cn/js/readmore.js" type="text/javascript"></script> <script> const btw = new BTWPlugin(); btw.init({ id: 'yArticle', blogId: '19381-1596467390161-874', name: '锋哥聊编程', qrcode: 'http://www.yiidian.com/statics/images/qywx.png', keyword: '1024', }); // 调整显示内容 var rm_btn = $("#read-more-btn"); rm_btn.html('~阅读全文~人机检测~'); </script> <script type="text/javascript" src="http://www.yiidian.com/api.php?op=count&id=40452&module=zsask"></script> <footer> <div class="deanfooter"> <div class="deanfttop nav-bar"> <div class="deanw1180"> <div class="deanlinks"> <ul> <li style="width:280px;"> <p>常见技术问题</p> <a href="/questions/402602" title="Android：在模块jefied-play-services-测量和jefied-play-services-测量-impl中发现重复类" target="_blank">Android：在模块jefied-play-ser...</a> <a href="/questions/402601" title="HashMap如何跟踪entrySet等字段" target="_blank">HashMap如何跟踪entrySet等字段</a> <a href="/questions/402600" title="在Hashmap中查找匹配的键/值对" target="_blank">在Hashmap中查找匹配的键/值对</a> <a href="/questions/402599" title="如何迭代Hashmap并与同一Hashmap中的其他键进行组合以比较它们的对象" target="_blank">如何迭代Hashmap并与同一Hashmap...</a> <a href="/questions/402598" title="HashCode-如果相等的对象碰巧在同一个桶中散列会发生什么？" target="_blank">HashCode-如果相等的对象碰巧在...</a> <a href="/questions/402597" title="Java哈希码和桶大小-关系" target="_blank">Java哈希码和桶大小-关系</a> </li> <li> <p>常用工具</p> <a href="http://www.yiidian.com/blog/notes/" target="_blank">编程笔记</a> <a href="http://www.yiidian.com/blog/interview/" target="_blank">编程面试题</a> <a href="http://www.yiidian.com/java_jar" target="_blank">Java Jar包下载</a> <a href="http://c.yiidian.com/" target="_blank">在线工具</a> <a href="http://layui.yiidian.com/" target="_blank">LayUI镜像站点</a> <a href="http://www.yiidian.com/bysj_doc/">毕设文档下载</a> </li> <li> <p>站点信息</p> <a href="/site/about_us/" target="_blank">关于我们</a> <a href="/site/disclaimer/" target="_blank">免责声明</a> <a href="/tags" target="_blank">网站标签</a> </li> </ul> </div> <div class="deanspread"> <p>关注站长公众号：锋哥聊编程</p> <div class="deanweixin"> <img src="/statics/images/ydjc-wx.png"> <p>锋哥聊编程</p> </div> </div> <div class="clear"></div> </div> </div> <div class="deanofficial"> Copyright © 2017-2022 一点教程. All Rights Reserved. <br/>备案号：<a href="https://beian.miit.gov.cn/" target="_blank"><font color="white">粤ICP备17065202号-3</font></a> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?5680e7b580ba668dd42e343252481189"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> $(function(){ $.getJSON("http://www.yiidian.com/checklogin", function(data){ if(data.flag){ $('.no-login').hide(); $('.has-login').show(); $('#username').html(""+data.username); }else{ $('.no-login').show(); $('.has-login').hide(); } }); }); </script> </footer> <div class="fixed-btn nav-bar"> <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a> <a class="qrcode" href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a> <a class="writer" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1014671449&site=qq&menu=yes" style="font-size: 12px;" title="QQ客服"><i class="fa fa-qq" style="font-size: 20px;"></i></a> <!-- qrcode modal --> <div id="bottom-qrcode" class="modal panel-modal hide fade in"> <h4>微信关注</h4> <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.yiidian.com/statics/images/qrcode.png"></div> </div> </div> <script src="http://www.yiidian.com/statics/js/main.js"></script> <!--<![endif]--> <script src="http://www.yiidian.com/statics/js/amazeui.js"></script> </body> </html>
