Check an element has a particular CSS property using JavaScript

Question

How can I check whether an element has a particular CSS property or not example, if I set some style to a div like div {width: 100px; height: 100px; background-color: red; visibility: hidden;} How can I come to know that the div has visibility property set or not using JavaScript. I want to get true in return if the div has a visibility property hidden and false if it does not have.

Answer 1

This can be done with function getComputedStyle().

let element = document.querySelector('.block');
let style = getComputedStyle(element);

if (style.visibility == 'hidden') {
  console.log('true');
} 
  else {console.log('false');
}

.block {
  width: 100px; 
  height: 100px; 
  background-color: red; 
  visibility: hidden;
}

<div class="block"></div>