如何在 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) {&nbsp; return css.match(/[0-9.]+/gi)}function rgbToHex(r, g, b) {&nbsp; 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++)&nbsp; 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 {&nbsp; width: 100px;&nbsp; height: 100px;&nbsp; margin: 10px;&nbsp; background-color: rgba(0, 0, 0, 0.3);}<div id="box"></div>该脚本可以轻松改进，但主要思想是用于计算两种颜色之间结果的公式：ColorF = (ColorT*opacityT + ColorB*OpacityB*(1 - OpacityT)) / factorColorF是我们最终的颜色。ColorT/ColorB分别是顶部和底部颜色。opacityT/opacityB分别是为每种颜色定义的顶部和底部不透明度：该因子由该公式定义OpacityT + OpacityB*(1 - OpacityT)。

Answer 2

我认为基本上你想做的是理解浏览器渲染的颜色 - 这与元素背景定义的颜色完全不同。正如我在评论中所说，您有一个用半透明黑色定义的#box。根据它“后面”的元素是什么，您的颜色选择器将读取完全不同的内容（比较一下 #box 后面的红色背景和白色背景）。我真的不知道如何继续获得真正的渲染颜色，但我想我会开始研究这样的东西：https ://developer.mozilla.org/en-US/docs/Web/API/&nbsp;WebGLRenderingContext/readPixels希望有帮助。

Answer 3

一探究竟：$(document).ready(function(){&nbsp; alert(componentToHex($('#box').css('background-color')));});function componentToHex(c) {&nbsp; var hex = c.toString(16);&nbsp; return hex.length == 1 ? "0" + hex : hex;}function rgbToHex(r, g, b) {&nbsp; return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);}alert(rgbToHex(0, 51, 255));#box {&nbsp; width: 100px;&nbsp; height: 100px;&nbsp; margin: 10px;&nbsp; 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>