jQuery 将 CSS 颜色设置为 HEX 而不是 RGB答案

【问题标题】：jQuery set CSS color as HEX instead of RGBjQuery 将 CSS 颜色设置为 HEX 而不是 RGB
【发布时间】：2015-11-22 09:30:45
【问题描述】：

我正在尝试创建一个 jQuery 挂钩，它将读取和设置所有颜色为十六进制值而不是 RGB。我找到了一个可以将颜色正确读取为 HEX 的钩子，但我不确定如何修改它以将 CSS 颜色写为 HEX。

例如我想要 $("h1").css('color', '#333333');使用“style='color:#333333;'”代替当前的 RGB 等效项来内联样式 h1。我用来以十六进制返回读取颜色的钩子是：

$.cssHooks.color = {
get: function(elem) {
    if (elem.currentStyle)
        var bg = elem.currentStyle["color"];
    else if (window.getComputedStyle)
        var bg = document.defaultView.getComputedStyle(elem,
            null).getPropertyValue("color");
    if (bg.search("rgb") == -1)
        return bg;
    else {
        bg = bg.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
        function hex(x) {
            return ("0" + parseInt(x).toString(16)).slice(-2);
        }
        return "#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3]);
    }
}}

更新

通过让所有元素样式将任何颜色转换为 HEX 并重建样式并通过 $(elm).attr(style, styles); 设置它，我能够以一种超级迂回的方式完成它。看起来非常 hacky 和令人费解，但它确实有效。

【问题讨论】：

不确定我明白了，但这取决于浏览器实际设置的内容，更重要的是返回，所以不能保证浏览器会返回 rgb 或 rgba，或者对于旧浏览器甚至是十六进制？
我正在创建一个为电子邮件创建 HTML 的工具。由于许多电子邮件客户端不能很好地处理 RGB 颜色，我希望所有颜色都设置为 HEX 格式。目前该工具仅供我自己使用，我正在使用最新版本的 Chrome 进行测试。

标签： javascript jquery css colors hook

【解决方案1】：

你遇到的问题是 jQuery 不会写你想要的，而是它可以理解的。您可以像这样“强制”代码执行您想要的操作：

$('h1').css('color', '');
$('h1').attr('style', $('h1').attr('style') + 'color: #FFEE02');

为了不让你的html代码增长太多，你必须使用第一行，而在第二行，你设置了html的颜色。

【讨论】：

【解决方案2】：

这个方法似乎对我有用，但它假定一个格式良好的字符串。您可以将支票添加到此函数中：

function rgb_to_hex(rgb_color) {
    if (!rgb_color) return ''
    return rgb_color
        .replace(/.*rgba?\(([^(]+)\).*/gi, '$1')
        .split(',')
        .splice(0,3)
        .reduce(function(acc, cur) { return acc+format_hex(cur) }, '');
}

function format_hex(ns) {
    var v;
    return isNaN(v = parseInt(ns)) ? '' : ('00' + v.toString(16)).substr(-2);
}

var v,
    color1 = (v = rgb_to_hex('rgb(0,0,0)')) !== '' ?  '#' + v : '',
    color2 = (v = rgb_to_hex('rgb(0,255,0)')) !== '' ?  '#' + v : '',
    color3 = (v = rgb_to_hex('rgba(123,39,12, .1)')) !== '' ?  '#' + v : '',
    color4 = (v = rgb_to_hex()) !== '' ?  '#' + v : '';
    color5 = (v = rgb_to_hex('gobbledegook')) !== '' ?  '#' + v : '';
console.log(color1); // '#000000'
console.log(color2); // '#00ff00'
console.log(color3); // '#7b270c'
console.log(color4); // ''
console.log(color5); // ''

另外，这部分：

if (elem.currentStyle)
    var bg = elem.currentStyle["color"];
else if (window.getComputedStyle)
    var bg = document.defaultView.getComputedStyle(elem, null)
        .getPropertyValue("color");

应该是这样的：

var bg = '';
if (elem.currentStyle) {
    bg = elem.currentStyle["color"];
} else if (window.getComputedStyle) {
    bg = document.defaultView.getComputedStyle(elem, null)
        .getPropertyValue("color");
}

因为bg 可能未定义。

【讨论】：