Capture the backgroundColor of an Element in jQuery

Question

I’m having a problem and I don’t know if it’s a bug, because jQuery isn’t capturing the background-color of the element passed by css(), I’m using an attribute data-color to configure the color of the element, in the browsers it puts the color, follows the image below:

When I consult in jQuery using this command: $('.btn').css('backgroundColor') it returns me blank but when I insert the style works.

Note: I am using this function to detect the color and check if it is a light or dark element.

const self = $(el) // Elementos

let getBackground = (item) => {
    let background = item.css('backgroundColor'),
            alpha = parseFloat(background.split(',')[3], 10)

    if ((isNaN(alpha) || alpha > .8) && background !== 'transparent') return background

    if (item.is('body'))
        return false
    else
        return getBackground(item.parent())
}

let getLuma = (color) => {
    let rgba = color.substring(4, color.length - 1).split(','),
            r = rgba[0],
            g = rgba[1],
            b = rgba[2],
            luma = 0.2126 * r + 0.7152 * g + 0.0722 * b

    return luma
}

// Consulta
let cor = getBackground(self),
        inverse = (getLuma(cor) > 183) ? ' inverse' : '',
        $ripple = $('<div class="ink' + inverse + '"></div>')

I imagined trying to pick up by the attribute data-color to compare but I don’t know how to jQuery because it returns only the name contained using data().

Answer 1

Strange that jQuery didn’t catch the background-color, but come on:

1. See what comes in the "item" variable of the "getBackground" function";
2. Try to catch the color of background using item.css('background-color'), which was to return the same thing using so item.css('backgroundColor');
3. Your parseFloat will always return isNan, because the return of the color "Teal" by jQuery is "rgb(0, 150, 136)" and if you give split(','), the return will be ["rgb(0", " 150", " 136)"]. That is, if you give parseFloat in the index 3, as per your code background.split(',')[3], will return a isNan. You must take the index 2 and remove the parenthesis. background.split(',')[2].replace(')', '');
4. In his if, you compare the variable "background" if it is different from "Transparent" (background !== 'transparent'), but the return of jQuery will be rgba(0, 0, 0, 0), stay tuned for this.

The main question is, see what is in the variable "item".

Answer 2

Watching that I’m inside VueJSincluding the jQuery within a component in "ready" Lifecycle, does not require the document ready, I made some tests if Vue was passing the Elements correctly and then right on the console I made another test, see the image:

I performed a test using console.log() inside the function by placing the following values:

let getBackground = (item) => {
    let background = item.css('backgroundColor'),
            alpha = parseFloat(background.split(',')[3], 10)

            console.log(item)
            console.log(background)

    if ((isNaN(alpha) || alpha > .8) && background !== 'transparent') return background

    if (item.is('body'))
        return false
    else
        return getBackground(item.parent())
}

The result is that the item corresponds to the elements passed by the Vue and the background the color by .css(), What I’ve come to realize seems that Vue is not assembling the element along with the data the solution was to put the document ready but I think it’s wrong because doing the same test only using the style it works perfectly.

So I’m going to open up another question by specifying the VueJS on the use of jQuery how to use both and whether it is necessary in each code of the jQuery should use the document ready.