Capture the backgroundColor of an Element in jQuery

Question

Capture the backgroundColor of an Element in jQuery

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

I have a problem and I do not know if it is a bug, because jQuery is not capturing the background-color of the element passed by css() , I am using a data-color attribute to configure the element color, in browsers it put the color, follow the image below:

WhenIqueryinjQueryusingthiscommand:$('.btn').css('backgroundColor')itreturnsmeblankbutwhenIenterthestyleitworks.

Note:Iamusingthisfunctiontodetectthecolorandcheckifitisalightordarkelement.

constself=$(el)//ElementosletgetBackground=(item)=>{letbackground=item.css('backgroundColor'),alpha=parseFloat(background.split(',')[3],10)if((isNaN(alpha)||alpha>.8)&&background!=='transparent')returnbackgroundif(item.is('body'))returnfalseelsereturngetBackground(item.parent())}letgetLuma=(color)=>{letrgba=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*breturnluma}//Consultaletcor=getBackground(self),inverse=(getLuma(cor)>183)?'inverse':'',$ripple=$('<divclass="ink' + inverse + '"></div>')

I figured trying to get the data-color attribute to compare but I do not know how to jQuery because it returns only the name contained using data() .

jquery

asked by anonymous 18.11.2016 / 01:59

2 answers

0

Strange jQuery does not catch background-color , but come on:

See what comes in the "item" variable of the "getBackground" function;

Try to catch the color of the background using item.css('background-color') , which was to return the same thing using item.css('backgroundColor') ;

Your parseFloat will always return isNan , since the return of the "teal" color 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 index 3, as it is in your code background.split(',')[3] , it will return an isNan . You should get the index 2 and remove the parenthesis. background.split(',')[2].replace(')', '') ;

In your if , you can compare the background variable if it is different from "transparent" ( background !== 'transparent' ), however the jQuery return will be rgba(0, 0, 0, 0) .

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

18.11.2016 / 12:57

Datatable Server Side does not paginate, sort, or search Login to php [closed]

score 0 · Accepted Answer

Note that I am within VueJS including jQuery within a component in "ready" lifecycle, it does not require document ready , I made some tests if Vue was passing the Elements correctly and then directly on the console I made another test, see the image:

I performed a test using console.log() within the function putting 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 item corresponds to the elements passed by Vue and background color to .css() , which I realize it seems that Vue is not mounting the element together with data the solution was

So I'm going to open another question by specifying document ready about using style of how to use both and if it's needed in every code of VueJS I should use jQuery .