将CSS获取的RGB背景色变量转换为HEX格式并写入div的实现问题

解决方案 #

你只需要给现有rgbToHex函数新增RGB字符串解析逻辑，让它支持直接传入getComputedStyle返回的RGB格式字符串即可，同时注意先修正你CSS代码里的拼写错误。

第一步：修正CSS拼写错误

你现有CSS里把background-color拼成了bakground-color，会导致nhcp4、nhcp5的背景色无法正确读取，先修改为：

.nhcp4 { background-color:teal}
.nhcp5 { background-color:yellow}

第二步：改造rgbToHex函数

改造后的函数会自动判断入参类型：如果只传入1个参数，就默认是RGB/RGBA格式字符串，自动提取其中的r/g/b数值完成转换，同时兼容原来传三个独立数值的用法：

function componentToHex(c) {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
  // 判断是否传入的是单个RGB字符串
  if (arguments.length === 1 && typeof r === 'string') {
    // 匹配rgb/rgba格式中的三个数字
    const match = r.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
    if (!match) return ''; // 匹配失败返回空
    r = Number(match[1]);
    g = Number(match[2]);
    b = Number(match[3]);
  }
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

第三步：直接调用即可

改造完成后你就可以直接按你想要的方式调用：

var rgbnhcp1 = rgbToHex(nhcp1);
// 写入到目标div
document.getElementById("TextWithRgbValue").innerHTML = rgbnhcp1;

内容的提问来源于stack exchange，提问作者Gibon