根据 ID 和特定属性值向元素添加 CSS 类

Question

I want to add a new class to body if an id has a specific style attribute using jQuery . Why is this code not working?

if ($('#myID').css('display') == 'none'){
  $('body').addClass('loaded');
}

Thank you in advance!

Answer 1

I found a solution. It works when I constantly check and not only once:

function check_loader(){
      if ($('#ple-loader-wraps99').css('display') == 'none'){
        $('body').addClass('loaded');
      };};
window.setInterval(check_loader,1000);  

Answer 2

You can listen for DOM changes on a specific DOM node using the MutationObserver API, then trigger an action:

 const targetNode = document.getElementById('my-id'); // Specify which mutations to observe (options) const config = { attributes: true }; // Simulate the preloader action (webpage load) setTimeout(function() { document.querySelector('#my-id').style ='display: none;' }, 1000) // Callback function to execute when mutations are observed const callback = function (mutationsList, observer) { console.log(`Mutation type: ${mutationsList[0].type}`) console.log(`ID ${mutationsList[0].target.id}`); // Make the necessary changes to your target elements here document.querySelector('body').classList.add('loaded'); }; // Create an observer instance linked to the callback function const observer = new MutationObserver(callback); // Start observing the target node for configured mutations observer.observe(targetNode, config);

 .loaded { background-color: crimson; }

 <div id="my-id">Loading..</div>

Note: All code is Vanilla JS (no jQuery).

Example created using code from the official documentation