如何在 Javascript 中获取元素的背景颜色（设置为 RGBA）？

Question

我有一个带有 Id 的元素box，其背景颜色设置rgba(0, 0, 0, 0.3)为白色背景。就像这样：#box {  width: 100px;  height: 100px;  margin: 10px;  background-color: rgba(0, 0, 0, 0.3);}<div id="box"></div>使用颜色选择器，我可以看到盒子的颜色是十六进制的#b2b2b2。现在，我想知道有什么方法可以使用 JavaScript获取此十六进制代码而不转换RGBA为hex格式吗？我阅读了有关getComputedStyle功能的内容，但无法使其工作。任何帮助是极大的赞赏。

Answer 1

我将考虑这个答案，其中详细说明了如何计算两层之间的颜色以编写以下脚本。

/* Utility function that you can easily find in the net */

function extractRgb (css) {

  return css.match(/[0-9.]+/gi)

}

function rgbToHex(r, g, b) {

  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);

}

/**/

var c = window.getComputedStyle(document.getElementById('box')).backgroundColor;

c = extractRgb(c);

for(var i=0;i<3;i++)

  c[i] = parseInt(c[i]*c[3] + 255*(1 - c[3])); /* Check the linked answer for details */

console.log(rgbToHex(c[0],c[1],c[2]) )

#box {

  width: 100px;

  height: 100px;

  margin: 10px;

  background-color: rgba(0, 0, 0, 0.3);

}

<div id="box"></div>

该脚本可以轻松改进，但主要思想是用于计算两种颜色之间结果的公式：

ColorF = (ColorT*opacityT + ColorB*OpacityB*(1 - OpacityT)) / factor

ColorF是我们最终的颜色。ColorT/ColorB分别是顶部和底部颜色。opacityT/opacityB分别是为每种颜色定义的顶部和底部不透明度：

该因子由该公式定义OpacityT + OpacityB*(1 - OpacityT)。

Answer 2

我认为基本上你想做的是理解浏览器渲染的颜色 - 这与元素背景定义的颜色完全不同。

正如我在评论中所说，您有一个用半透明黑色定义的#box。根据它“后面”的元素是什么，您的颜色选择器将读取完全不同的内容（比较一下 #box 后面的红色背景和白色背景）。

我真的不知道如何继续获得真正的渲染颜色，但我想我会开始研究这样的东西：https ://developer.mozilla.org/en-US/docs/Web/API/ WebGLRenderingContext/readPixels

希望有帮助。

Answer 3

一探究竟：

$(document).ready(function(){

  alert(componentToHex($('#box').css('background-color')));

});

function componentToHex(c) {

  var hex = c.toString(16);

  return hex.length == 1 ? "0" + hex : hex;

}

function rgbToHex(r, g, b) {

  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);

}

alert(rgbToHex(0, 51, 255));

#box {

  width: 100px;

  height: 100px;

  margin: 10px;

  background-color: rgba(0, 0, 0, 0.3);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div id="box"></div>