Check if an Element Is Hidden or Visible Using JavaScript

To check if an element is hidden or not using JavaScript, you can use the window.getComputedStyle() method. This method returns an object containing the values of all CSS properties of an element. You can then check the display or visibility property of the element to determine if it is hidden or not. Eg:

const element = document.getElementById('myElement');
const style = window.getComputedStyle(element);
const display = style.getPropertyValue('display');
const visibility = style.getPropertyValue('visibility');

if (display === 'none' || visibility === 'hidden') {
  console.log('The element is hidden.');
} else {
  console.log('The element is visible.');
}

Alternatively, you can use the jQuery :hidden selector to check if an element is hidden . Eg:

if ($('#myElement').is(':hidden')) {
  console.log('The element is hidden.');
} else {
  console.log('The element is visible.');
}