猿问

如何在 Javascript 中获取元素的背景颜色(设置为 RGBA)?

我有一个带有 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获取此十六进制代码而不转换RGBAhex格式吗?我阅读了有关getComputedStyle功能的内容,但无法使其工作。任何帮助是极大的赞赏。



MMTTMM
浏览 198回答 3
3回答

凤凰求蛊

我将考虑这个答案,其中详细说明了如何计算两层之间的颜色以编写以下脚本。/* 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)。

人到中年有点甜

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

白衣染霜花

一探究竟:$(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>
随时随地看视频慕课网APP

相关分类

Html5
我要回答