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

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

例如，我想要$（“h1”）.css（'color'，'＃333333'）; 内联样式h1的“style ='color：＃333333;'”而不是当前的RGB等价物。 我正在使用的钩子以十六进制形式返回读取颜色：

$.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）设置它，从而以超级迂回的方式实现它。 看起来非常哈克和令人费解，但它的工作原理。

---

这种方法似乎适用于我，但它假定格式良好的字符串。 你可以将你的支票添加到这个函数中：

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可能没有定义。

---

你所遇到的问题是，jQuery不会写你想要的东西，但它能理解。 你可以像这样“强制”代码做你想做的事情：

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

您必须使用第一行，才能使您的html代码不会增长太多，并且在第二行中，您将颜色设置为html。

链接地址: http://www.djcxy.com/p/15347.html

上一篇: jQuery set CSS color as HEX instead of RGB

下一篇: RGB or HEX for color