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

Question

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

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

Answer 1

Цвета всегда возвращаются как 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, Вот рабочий образец, чтобы вы увидели, что он работает.

Answer 2

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

Answer 3

function RGBAToHexA(test:string) {
let sep = test.toString().indexOf(",") > -1 ? "," : " ";
const rgba = test.toString().substring(5).split(")")[0].split(sep);
console.log(rgba)
let r = (+rgba[0]).toString(16),
  g = (+rgba[1]).toString(16),
  b = (+rgba[2]).toString(16),
  a = Math.round(+rgba[3] * 255).toString(16);

    if (r.length == 1)
        r = "0" + r;
    if (g.length == 1)
        g = "0" + g;
    if (b.length == 1)
        b = "0" + b;
    if (a.length == 1)
        a = "0" + a;

return "#" + r + g + b + a;}

Этот код у меня отлично работает, я использую транспортир Jasmine и получал формат rgb, когда пытался получить cssValue элемента.

it('should check color  of login btn', async function(){
    browser.waitForAngularEnabled(true);
    browser.actions().mouseMove(element(by.css('.btn-auth, .btn-auth:hover'))).perform(); // mouse hover on button
    csspage.Loc_auth_btn.getCssValue('color').then(function(color){
        console.log(RGBAToHexA(color))
        expect( RGBAToHexA(color)).toContain(cssData.hoverauth.color);

    })
   // expect(csspage.Loc_auth_btn.getCssValue('color')).toContain(cssData.hoverauth.color);
})