why element.style.backgroundColor property gives an empty string as a result?

Question

console.log(document.querySelector(".green").style.backgroundColor);
// gives an empty string as a result in console

.green {
  width: 200px;
  height: 200px;
  background-color: green;
}

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="src/styles.css">
</head>
<body>
    <div class="green"></div>
    <script src="src/index.js">
    </script>
</body>
</html>

I know that I can also use

window.getComputedStyle(document.querySelector(".green")).backgroundColor;

which is mentioned in this answer

but I want to know the reason behind this that why it is giving an empty string as a result.

score 4 · Accepted Answer · answered Dec 01 '20 at 18:42

4

.style contains only inline styles (set via that property, or the HTML attribute with the same name). It's not affected by style sheets at all. getComputedStyle gets you the current effective value for that property, regardless of where it came from.

answered Dec 01 '20 at 18:42

Matti Virkkunen

63,558
9
127
159

score 3 · Answer 2 · answered Dec 01 '20 at 18:44

3

You want the computed element style:

 console.log(getComputedStyle(document.querySelector(".green"), null).getPropertyValue("background-color"));

answered Dec 01 '20 at 18:44

Stefan Avramovic

1,365
2
11
20

Is there is any way that I can get the name of the color as a string instead of the RGB value? – Mayank Jindal Dec 01 '20 at 18:54
you can convert rgb to name, check out this post https://stackoverflow.com/questions/5486730/convert-rgb-to-colorname-string-javascript – Stefan Avramovic Dec 01 '20 at 19:11

score 1 · Answer 3 · answered Dec 01 '20 at 18:42

As is stated in the MDN Page for the element.style property:

The style property is used to get as well as set the inline style of an element.

Your element does not have a style attribute in which the background color is set-- as such, <yourelement>.style.backgroundColor returns an empty string. This is why getComputedStyle exists-- to allow you to interrogate the actual final/applied styles on an element, not merely those that might be inline on the element as a style attribute.

why element.style.backgroundColor property gives an empty string as a result?

3 Answers3