web-dev-qa-db-ja.com

jQuery.css（ "backgroundColor"）を16進形式で強制的に返すことはできますか？

次のような要素があります。

_<p>My text with a <strong class="highlighted">sample highlight</strong>.<p>
_

そして、このようなCSSクラス：

_.highlighted {
    background: #f0ff05;
    font-weight: normal;
}
_

しかし、このようなjQueryを使用する場合：

_$(".highlighted").css("backgroundColor");
_

rgb(240, 255, 5)を返します。 rgbからhexに変換する関数を書くことができますが、jQueryがすでに16進形式で値を返す方法があるかどうか知りたい。

jqueryrgbhexbackground-color
47
user776290

色は常にrgbとして返されます（既にhexで返されているIE6を除く）。その後、ネイティブで別の形式で返すことはできません。

あなたが言ったように、hexをrgbに変換に関数を書くことができます。この関数の記述方法の例をいくつか示したトピックを次に示します。 RGB値ではなく16進数の色値を取得する方法 .

しかし、すでに16進数でjQueryを直接返す方法があるかどうか疑問に思います：答えはyesです。これは CSSフックを使用して可能です jQuery 1.4.3以降。

コードは次のとおりです。

_$.cssHooks.backgroundColor = {
    get: function(elem) {
        if (elem.currentStyle)
            var bg = elem.currentStyle["backgroundColor"];
        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]);
        }
    }
}
_

$(".highlighted").css("backgroundColor")を呼び出すと、戻り値は_#f0ff05_になります。これが 作業サンプル です。

73
Erick Petrucelli

これは、Erick Petrucelliの回答のわずかに調整されたバージョンです。 RGBAを処理するようです。

            $.cssHooks.backgroundColor = {
            get: function (elem) {
                if (elem.currentStyle)
                    var bg = elem.currentStyle["backgroundColor"];
                else if (window.getComputedStyle)
                    var bg = document.defaultView.getComputedStyle(elem,
                        null).getPropertyValue("background-color");
                if (bg.search('rgba') > -1) {
                    return '#00ffffff';
                } else {
                    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]);
                    }
                }
            }
        };
2
li3