cssHooks: multiple CSS selectors in one function

Question

I have this function using cssHooks to convert the background-color's rgb color to a HEX value. My question is this, I also want to do it the border-color and text color. Do I need to create 3 separate functions or can I combine?

EDIT : So here's 3 functions. I'm having a hard time trying to combine all three into one - to make the code cleaner. How can I combine all 3 into one hook?

$.cssHooks.backgroundColor = {
get: function(elem) {
    if (elem.currentStyle)
        var bg = elem.currentStyle["background-color"];
    else if (window.getComputedStyle)
        var bg = document.defaultView.getComputedStyle(elem,
            null).getPropertyValue("background-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]);
    }
}
}

$.cssHooks.borderColor = {
get: function(elem) {
    if (elem.currentStyle)
        var bg = elem.currentStyle["border-color"];
    else if (window.getComputedStyle)
        var bg = document.defaultView.getComputedStyle(elem,
            null).getPropertyValue("border-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]);
    }
}
}

$.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]);
    }
}
}

Answer 1

This changes ALL values inputs...not just individual CSS selectors...

$.cssHooks.colorz = {
get: function(elem, rule) {
if (elem.currentStyle)
    var bg = elem.currentStyle[rule];
else if (window.getComputedStyle)
    var bg = document.defaultView.getComputedStyle(elem,
        null).getPropertyValue(rule);
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]);
}
}
}

Answer 2

You can do it like this:

    function _register_jquery_get_hex_color(newname,styleattr) {
    $.cssHooks[newname] = {
        get: function(elem) {
            if (elem.currentStyle)
                var bg = elem.currentStyle[styleattr];
            else if (window.getComputedStyle)
                var bg = document.defaultView.getComputedStyle(elem,
                    null).getPropertyValue(styleattr);
            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]);
            }
        }
    }
}
_register_jquery_get_hex_color("backgroundColor","background-color");
_register_jquery_get_hex_color("borderColor","border-color");
_register_jquery_get_hex_color("color","color");