CODEWITHSUNDEEP
javascripthtmlcssfrontend
GorgMish
GorgMish

Reputation: 55

How to get backgroundColor of element when it is set by the CSS property background?

One way to set the background-color property of an element is by using background: #someColorValue. However, doing this will not change the backgroundColor property in the style of that element. As a result, when I use element.style.backgroundColor, it returns an empty string. This problem doesn't occur when setting color directly using the background-color property. Why does this happen??

Upvotes: -1

Views: 1225

Answers (1)

Richard
Richard

Reputation: 7443

When you access the style (ElementCSSInlineStyle.style) property of an element, you are accessing its inline style. This means that if you give an element a style via a class, you still cannot access it through style. As a result, it will return you an empty string ('').

Window.getComputedStyle, on the other hand, returns:

... the values of all CSS properties of an element, after applying active stylesheets and resolving any basic computation those values may contain

This means that you can access the style that is given via a class, simply because it gives you all CSS properties after applying all active stylesheets (including those applied via a class).

In your particular case, you're trying to access background. background CSS property is actually a shorthand that also sets a lot of other background-related CSS properties. When you specify only the color using background, the other properties will automatically be inserted with their default values. You can access this background property through ElementCSSInlineStyle.style. However, when accessing background in the object Window.getComputedStyle returns, you will always get an empty string. This is because the object returned does not have the key background; it only has the keys for each background-related CSS properties (e.g. background-color, background-clip, etc.).

Here's a simple example demonstrating how you cannot access a non-inline style through style property of an element, and also how you cannot access the value of a property that is shorthand through the object Window.getComputedStyle

const boxOne = document.querySelector('#boxOne')
const boxTwo = document.querySelector('#boxTwo')

console.log(`Box One: background ${boxOne.style['background']}, background-color ${boxOne.style['background-color']}`)

console.log(`Box Two: background ${boxTwo.style['background']}, background-color ${boxTwo.style['background-color']}`)

const boxOneComputedStyles = getComputedStyle(boxOne)
const boxTwoComputedStyles = getComputedStyle(boxTwo)

// There's no 'background' key in getComputedStyle

console.log(`Box One (Computed Styles): background ${boxOneComputedStyles['background']}, background-color ${boxOneComputedStyles['background-color']}`)

console.log(`Box Two (Computed Styles): background ${boxTwoComputedStyles['background']}, background-color ${boxTwoComputedStyles['background-color']}`)
#boxOne,
#boxTwo {
  background: #121212DD;
  border-radius: 5px;
  width: 50px;
  height: 50px;
  margin: 1em;
}
<div id="boxOne" style="background-color: #121212DD;"></div>
<div id="boxTwo" style="background: #121212DD;"></div>

Upvotes: 1

Related Questions