我有一個帶有 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?，F在，我想知道有什么方法可以使用 JavaScript獲取此十六進制代碼而不轉換RGBA為hex格式嗎？我閱讀了有關getComputedStyle功能的內容，但無法使其工作。任何幫助是極大的贊賞。
3 回答
鳳凰求蠱
TA貢獻1825條經驗 獲得超4個贊
我將考慮這個答案，其中詳細說明了如何計算兩層之間的顏色以編寫以下腳本。
/* 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)。
人到中年有點甜
TA貢獻1895條經驗 獲得超7個贊
我認為基本上你想做的是理解瀏覽器渲染的顏色 - 這與元素背景定義的顏色完全不同。
正如我在評論中所說，您有一個用半透明黑色定義的#box。根據它“后面”的元素是什么，您的顏色選擇器將讀取完全不同的內容（比較一下 #box 后面的紅色背景和白色背景）。
我真的不知道如何繼續獲得真正的渲染顏色，但我想我會開始研究這樣的東西：https ://developer.mozilla.org/en-US/docs/Web/API/ WebGLRenderingContext/readPixels
希望有幫助。
白衣染霜花
TA貢獻1796條經驗 獲得超10個贊
一探究竟：
$(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 關注
- 293 瀏覽
添加回答
舉報
0/150
提交
取消