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返回已经在十六进制格式上的值< / em>的

Answer 1

颜色总是以 rgb 的形式返回（除了已经在 hex 中返回的IE6），然后我们无法以原生的其他格式返回。

就像你说的那样，你可以编写一个函数来将hex转换为rgb 。这是一个主题，其中包含几个如何编写此函数的示例：How to get hex color value rather than RGB value?。

但是你想知道是否有办法直接以十六进制的形式返回jQuery：答案是肯定的，自jQuery 1.4.3以来可以使用CSS Hooks。

代码应为：

$.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。这是一个working sample，你看它有效。

Answer 2

这是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]);
                    }
                }
            }
        };

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量角器，而当我尝试获取元素的ccssValue时，我得到的是rgb格式。

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);
})

我可以强制jQuery.css（“backgroundColor”）以十六进制格式返回吗？

3 个答案: