Question

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

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('');
}

但问题是，我在"transparent"的FireFox bgcolor，其中rgbhex()失败并显示错误：

TypeError: elems is null

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

如何以crossbrowser格式获取css颜色并将其转换为十六进制？

Answer 1

当然，您将不得不处理颜色设置为无rgba值的情况？

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

我会这样做：

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

但是，你会在浏览器集体不一致的其他环境中遇到其他例子，所以也许一个默认为黑色或白色的case语句将是一个更好的解决方案。

crossbrowser - 获得css颜色

1 个答案: