Можно ли принудительно вернуть jQuery.css ("backgroundColor") в шестнадцатеричном формате? - PullRequest
Новая
       25

Можно ли принудительно вернуть jQuery.css ("backgroundColor") в шестнадцатеричном формате?

47 голосов
/ 30 мая 2011

У меня есть такой элемент: 

<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 возвращал значение уже в шестнадцатеричном формате .

Ответы [ 2 ]

72 голосов
/ 30 мая 2011

Цвета всегда возвращаются как rgb (кроме IE6, который уже возвращается в hex ), тогда мы не можем вернуться в другом формате изначально.

Как вы сказали,Вы можете написать функцию для преобразования шестнадцатеричного значения в rgb .Вот тема с несколькими примерами того, как написать эту функцию: Как получить шестнадцатеричное значение цвета, а не значение RGB? .

Но вам интересно, есть ли способ напрямую вернутьjQuery уже в шестнадцатеричном виде: ответ - да , это возможно при использовании 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.Вот рабочий образец , чтобы вы видели, как он работает.

2 голосов
/ 14 сентября 2017

Это слегка скорректированная версия ответа Эрика Петручелли.Похоже, для обработки 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]);
                    }
                }
            }
        };
...