crossbrowser - 获取css颜色[重复]答案

【问题标题】：crossbrowser - get css color [duplicate]crossbrowser - 获取css颜色[重复]
【发布时间】：2015-10-15 21:40:37
【问题描述】：

我正在尝试获取元素的背景颜色：

var bgcolor = $('.myclass').first().css('background-color')

并尝试将其转换为十六进制

function rgbhex(color) {
    return "#" + $.map(color.match(/\b(\d+)\b/g), function (digit) {
               return ('0' + parseInt(digit).toString(16)).slice(-2);
    }).join('');
}

但问题是，我进入 FireFox "transparent" for bgcolor，其中 rgbhex() 失败并出现错误：

TypeError: elems is null

但在 chrome 中，我得到了 rgba(0, 0, 0, 0) 和 rgbhex() 正在为此工作。

如何获取跨浏览器格式的 css 颜色并将其转换为十六进制？

【问题讨论】：

@AdrianoRepetti - 链接的问题是针对命名颜色的，而不是浏览器从 js 返回的任何背景颜色
对，我应该将其标记为相关，但这是他的实际问题

标签： javascript jquery html css

【解决方案1】：

您肯定要处理颜色设置为无 rgba 值的情况吗？

浏览器永远不会完美一致地处理这类事情，所以我认为问题在于您每次都假设一个 rbga 值，从而使代码变得脆弱。即使你使用getComputedStyle()，它在好的浏览器中会比css()（它直接获取值）更加一致，你仍然需要处理边缘情况。

我会这样做：

if ('transparent' === bgcolor) {
  hex = '#000';
} else {
  // work magic here
}

但是，您将在浏览器整体不一致的其他上下文中遇到其他示例，因此默认为黑色或白色的 case 语句可能是更好的解决方案。

【讨论】：