Trying to get background color of all buttons

Question

Iam trying to get the background-color of the button.

var btns = document.getElementsByTagName('button');
hoverBtn = false;
var bubbleColor;

for(i=0;i<btns.length;i++)
{
button = btns[i];
console.log(btns[i]);
btns[i].addEventListener('mouseenter', function()
{
console.log(button);
hoverBtn = true;
bubbleColor = button.style.backgroundColor;
console.log(button.style.backgroundColor);

});

Answer 1

Hi James, I'am trying to get the background color of the button and put it inside the variable bubbleColor but the code returns an empty string.

Answer 2

What do you mean by "get"? I don't see any errors that will break your code (though some of it could be improved). Does it work? What exactly do you want us to help with?

Answer 3

You can't get values from CSS like that, unless you have used JS to assign them. You can assign CSS values like that, though.

You need to use something like this instead:

getComputedStyle(button).getPropertyValue("background-color");

Have a look this method in action here:

https://code.sololearn.com/WtkmtOY8BZ9m/?ref=app

Answer 4

This link is useful, too.

https://zellwk.com/blog/css-values-in-js/