我有一個(gè)帶有 Id 的元素box，其背景顏色設(shè)置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>使用顏色選擇器，我可以看到盒子的顏色是十六進(jìn)制的#b2b2b2?，F(xiàn)在，我想知道有什么方法可以使用 JavaScript獲取此十六進(jìn)制代碼而不轉(zhuǎn)換RGBA為hex格式嗎？我閱讀了有關(guān)getComputedStyle功能的內(nèi)容，但無法使其工作。任何幫助是極大的贊賞。
3 回答
鳳凰求蠱
TA貢獻(xiàn)1825條經(jīng)驗(yàn) 獲得超4個(gè)贊
我將考慮這個(gè)答案，其中詳細(xì)說明了如何計(jì)算兩層之間的顏色以編寫以下腳本。
/* 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>
該腳本可以輕松改進(jìn)，但主要思想是用于計(jì)算兩種顏色之間結(jié)果的公式：
ColorF = (ColorT*opacityT + ColorB*OpacityB*(1 - OpacityT)) / factor
ColorF是我們最終的顏色。ColorT/ColorB分別是頂部和底部顏色。opacityT/opacityB分別是為每種顏色定義的頂部和底部不透明度：該因子由該公式定義
OpacityT + OpacityB*(1 - OpacityT)。
人到中年有點(diǎn)甜
TA貢獻(xiàn)1895條經(jīng)驗(yàn) 獲得超7個(gè)贊
我認(rèn)為基本上你想做的是理解瀏覽器渲染的顏色 - 這與元素背景定義的顏色完全不同。
正如我在評論中所說，您有一個(gè)用半透明黑色定義的#box。根據(jù)它“后面”的元素是什么，您的顏色選擇器將讀取完全不同的內(nèi)容（比較一下 #box 后面的紅色背景和白色背景）。
我真的不知道如何繼續(xù)獲得真正的渲染顏色，但我想我會(huì)開始研究這樣的東西：https ://developer.mozilla.org/en-US/docs/Web/API/ WebGLRenderingContext/readPixels
希望有幫助。
白衣染霜花
TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超10個(gè)贊
一探究竟：
$(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>
- 3 回答
- 0 關(guān)注
- 323 瀏覽
添加回答
舉報(bào)
0/150
提交
取消