Getting a Html element background Color With JS

Question

Well, I have a function to get the background color of a clicked html element. however, as I set the background color via css, with a class, the object`s background color in x.style.background just returns "";

My code: Html:

<li onclick="setCor(this)" id="vermelho" class="vermelho">Vermelho</li>

The JS function:

function setCor(x){
    cor = x.style.backgroundColor;
}

And the .vermelho class:

.vermelho{
    background-color: #ff0000;
}

How can I get the css value via JS? I can't use jQuery for it, need to be just JS.

possible duplicate of How to get a style attribute from a css class by javascript/jquery? — web_bod
– web_bod, Commented Oct 28, 2013 at 17:58

ComFreek · Accepted Answer · 2013-10-28 17:59:15Z

4

element.style only returns the inline style attributes (see here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.style#Notes)

You might be better off using window.getComputedStyle(). That however returns an RGB color which you might want to convert to hex if you desire.

function setCor(x) {
  cor = window.getComputedStyle(x, null)['background-color'];
}

edited Oct 28, 2013 at 17:59

ComFreek

29.5k18 gold badges107 silver badges157 bronze badges

answered Oct 28, 2013 at 17:58

lxe

7,7772 gold badges24 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Overflow Stack Over a year ago

getComputedStyle() is not implemented by <=IE8, to work in IE add currentStyle to the above code.

Kio Coan Over a year ago

Thanks ComFreek for your help. And Spencer Leonard too.

Community · Accepted Answer · 2017-05-23 12:21:10Z

0

Just to add a note at the @Ixe answer's.

You may want to use this function to convert the value from RGB to HEX:

Javascript

function hex(x) { return ("0" + parseInt(x).toString(16)).slice(-2); }

Example

function toHex(value) { return "#" + hex(value[0]) + hex(value[1]) + hex(value[2]) }

Code taken from this guy Can I force jQuery.css("backgroundColor") returns on hexadecimal format?

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Oct 28, 2013 at 18:06

Felipe Miosso

7,3396 gold badges46 silver badges56 bronze badges

Collectives™ on Stack Overflow

Getting a Html element background Color With JS

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related