Check for the value of a CSS property

Question

I use opacity: 0 for my class .best-match.

The CSS (Sass) looks like this:

.best-match
  opacity: 0

This is what I see in my browser:

.best-match[_ngcontent-tli-c4] {
  opacity: 0;
}

I would like to check with JavaScript if the property is set to 0. I have tried it with

if (document.querySelector('.best-match').style.opacity === '0') { ... }

but the output is always false. I have also tried it with @ViewChild():

if (this.bestMatchContainer.nativeElement.style.opacity === '0') { ... }

but that also returns false. What's wrong with my code?

Shimmy568 · Accepted Answer · 2019-11-14 16:34:46Z

1

The style property only works for inline styles (the value of the style attribute on that element) on that element. If you want to look at all the styles that are effecting the element (including styling from css) look at this. This might give you something that looks like this:

if (window.getComputedStyle(document.querySelector('.best-match')).opacity === 0) {...

answered Nov 14, 2019 at 16:34

Shimmy568

5032 silver badges8 bronze badges

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

Comments

Jing Yu · Accepted Answer · 2019-11-14 16:41:00Z

1

Try to use Window.getComputedStyle() function.

const element = document.querySelector('.best-match);

if (window.getComputedStyle(element).getPropertyValue('opacity') === 0) {
    // try something
}

Official guide: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

answered Nov 14, 2019 at 16:41

Jing Yu

1,63113 silver badges18 bronze badges

Collectives™ on Stack Overflow

Check for the value of a CSS property

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related