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

73

如何获取元素的背景色代码？

console.log($(".div").css("background-color"));

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

展开摘要

我想要的是

#f5b405

— 劳克
source

1

您想用价值做什么？

— 瑞安·奥尔兹

我想设置背景色的动画$(this).animate({ backgroundColor: '#f5b405' }, 'fast');

— laukok，2011年

2

但是我发现我也可以使用rgb代码来设置背景颜色的动画！哈哈

— laukok

102

检查下面的示例链接，然后单击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/中查看工作示例

— 侯赛因
source

5

有时会$(this).css('backgroundColor')回来rgba(n, n, n, n)。

— hippietrail 2013年

2

发挥了一些功能，使设计现代化实现自动化，例如...用法示例示例jsfiddle.net/DCaQb/625-尚不完美，但可能会对某些人有所帮助，因此我在此处链接以供参考

— Chris S.

3

感谢您的代码示例。可能只想将hexc函数重写为返回字符串的实函数，而不是设置全局变量。

— Johncl

11

有一点这种黑客攻击的，因为HTML5画布需要时，某些属性喜欢解析颜色值strokeStyle和fillStyle有载：

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

— 内森·瑞安（Nathan Ryan）
source

我相信这是一个新的HTML5浏览器:)最好的办法

— AT

9

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下正常工作

— 编码器
source

5

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

这是应该可以解决问题的脚本：http : //www.phpied.com/rgb-color-parser-in-javascript/

— 普通亨利
source

5

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

— 编码器
source

2

我美丽的非标准解决方案

的HTML

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

jQuery的

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

结果

#f5b405

— 纽瑞德
source

2

添加@Newred解决方案。如果您的样式不只是，则background-color可以使用以下代码：

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

— 拉杜·迪亚（Radu Diță）
source

我喜欢这种方式

— Newred

1

该解决方案利用了@Newred和@Radu Diță所说的内容。但是将在不太标准的情况下工作。

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

他们俩都存在的问题是，它们都不检查background-color：和颜色之间的空间。

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

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

— 案件
source