点击元素复制背景色时如何复制CSS变量var(--primary)而非RGB值

jQuery的.css()方法获取的是浏览器计算后的最终样式值，无法直接返回CSS代码中写入的CSS变量表达式，推荐通过新增自定义数据属性的方式实现需求，实现简单、兼容性强，也方便后续扩展多颜色卡片场景。

修改后的完整代码 #

HTML代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- 新增data-color-var属性存储需要复制的CSS变量字符串 -->
<div class="card" data-color-var="var(--primary)"></div>

CSS代码（无需修改） #

body {
  --primary: #7306f9;
}

.card {
  background-color: var(--primary);
  height: 50px;
  width: 50px;
}

JavaScript代码 #

const copyToClipboard = str => {
    const el = document.createElement('textarea');
    el.value = str;
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
};

jQuery('.card').click( function () {
    // 读取自定义属性中的变量值复制即可
    const targetValue = $(this).data('color-var');
    copyToClipboard(targetValue);
});

可选替代方案（无需修改HTML） #

如果不希望修改HTML新增属性，可以提前维护计算后RGB值与CSS变量的映射表，匹配后返回对应变量名，适合颜色变量固定的场景：

const copyToClipboard = str => {
    const el = document.createElement('textarea');
    el.value = str;
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
};

// 提前维护色值与对应CSS变量的映射关系
const colorMap = {
    'rgb(115, 6, 249)': 'var(--primary)'
    // 新增其他颜色时在这里补充对应关系即可
}

jQuery('.card').click( function () {
    const rgbColor = $(this).css("background-color");
    // 匹配到映射就返回变量名，匹配不到回退返回RGB值避免报错
    const targetValue = colorMap[rgbColor] || rgbColor;
    copyToClipboard(targetValue);
});

内容的提问来源于stack exchange，提问作者Kyle