如何获得十六进制元素的背景颜色代码？

您只需将颜色转换为所需的格式即可。

这里有一个脚本，应该可以做到这一点: http://www.phpied.com/rgb-color-parser-in-javascript/

这里有一点技巧，因为当设置了某些属性(如 strokeStyle和 fillStyle)时，HTML5画布需要解析颜色值:

var ctx = document.createElement('canvas').getContext('2d');
ctx.strokeStyle = 'rgb(64, 128, 192)';
var hexColor = ctx.strokeStyle;

检查下面的示例链接并单击 div 获得十六进制的颜色值。

var color = '';
$('div').click(function() {
var x = $(this).css('backgroundColor');
hexc(x);
console.log(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('');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='div' style='background-color: #f5b405'>Click me!</div>

检查 http://jsfiddle.net/DCaQb/的工作实例

function getBackgroundColor($dom) {
var bgColor = "";
while ($dom[0].tagName.toLowerCase() != "html") {
bgColor = $dom.css("background-color");
if (bgColor != "rgba(0, 0, 0, 0)" && bgColor != "transparent") {
break;
}
$dom = $dom.parent();
}
return bgColor;
}

在 Chrome 和 Firefox 下正常工作

事实上，如果在某些元素下没有 background-color的定义，Chrome 会将其 background-color输出为 rgba(0, 0, 0, 0)，而 Firefox 的输出为 transparent。

我漂亮的非标准解决方案

超文本标示语言

<div style="background-color:#f5b405"></div>

JQuery

$(this).attr("style").replace("background-color:", "");

结果

#f5b405

添加@Newred 解决方案。 如果你的风格不仅仅是 background-color，你可以这样做:

$(this).attr('style').split(';').filter(item => item.startsWith('background-color'))[0].split(":")[1]

这种解决方案利用了@Newred 和@Radu Disomething 所说的部分内容，但是在不太标准的情况下仍然有效。

 $(this).attr('style').split(';').filter(item => item.startsWith('background-color'))[0].split(":")[1].replace(/\s/g, '');

两者的问题都在于都没有检查背景颜色: 和颜色之间的空间。

所有这些都将与上述代码匹配。

 background-color: #ffffff
background-color:      #fffff;
background-color:#fffff;