以 #000 格式获取背景颜色，而不是 RGB 格式

Question

使用以下代码，可以获取表格中任何 TD 元素的 RGB 颜色值：

alert($(this).css('background-color'));

结果是 :

rgb(0, 255, 0)

使用jQuery能否获取#000格式，还是需要使用函数将RGB转换为#000格式？

提前感谢您的帮助。

- David

---

https://dev59.com/XHI-5IYBdhLWcg3wqqTg - Eli

使用jQuery获取十六进制值而不是RGB值。 - ojhawkins

jQuery是什么？ :O - Jashwant

@ojhawkins -> 感谢您的回复，我因为您找到了解决方案，非常感谢。bee - David

抱歉，我发布了一个答案，但它自动转移到了评论中，所以标记看起来很奇怪。@Jashwant - ojhawkins

Answer 1

尝试

var color = '';
$('div').click(function() {
   var hexcolor = $(this).css('backgroundColor');
   hexc(hexcolor);
   alert(color);
});

function hexc(colorval) {
    var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    delete(parts[0]);
    for (var i = 1; i <= 3; ++i) {
        parts[i] = parseInt(parts[i]).toString(16);
        if (parts[i].length == 1) parts[i] = '0' + parts[i];
    }
    color = '#' + parts.join('');

    return color;
}

- Devang Rathod

---

谢谢你的代码，我会尝试它。 - David

@beegees 你试过了吗？ - Devang Rathod

@beegees 如果它有效，你必须接受它，这样这个问题就不会显示在未回答的问题中。 - Devang Rathod

Answer 2

这是我之前写的一个函数，它对我来说很好用，而且没有循环。

function rgbToHex(total) {
    var total = total.toString().split(',');
    var r = total[0].substring(4);
    var g = total[1].substring(1);
    var b = total[2].substring(1,total[2].length-1);
    return ("#"+checkNumber((r*1).toString(16))+checkNumber((g*1).toString(16))+checkNumber((b*1).toString(16))).toUpperCase();
}
function checkNumber(i){
    i = i.toString();
    if (i.length == 1) return '0'+i;
    else return i;
}

代码片段：

$('.background').each(function(){
    $(this).html(rgbToHex($(this).css("backgroundColor")));
});

function rgbToHex(total) {
        var total = total.split(',');
        var r = total[0].substring(4);
        var g = total[1].substring(1);
        var b = total[2].substring(1,total[2].length-1);
    return ("#"+checkNumber((r*1).toString(16))+checkNumber((g*1).toString(16))+checkNumber((b*1).toString(16))).toUpperCase();
}
function checkNumber(i){
    i = i.toString();
    if (i.length == 1) return '0'+i;
    else return i;
}

.background {
    border:2px solid #000;
    width:30px;
    height:30px;
    display:inline;
    padding:3px;
}
.style1 { background-color:#000000; color:#fff }
.style2 { background-color:#ff0000 }
.style3 { background-color:#ffff00 }
.style4 { background-color:#00ffff }
.style5 { background-color:#0000ff;color:#fff }
.style6 { background-color:#00ff00 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="background style1"></div>
<div class="background style2"></div>
<div class="background style3"></div>
<div class="background style4"></div>
<div class="background style5"></div>
<div class="background style6"></div>

- SeinopSys