JSFiddle - React, Tailwind, and code Playground

by Lucaskazama

HTML

<button id="desktop-view">
Desktop
</button>

<button id="mobile-view">
Mobile
</button>

<div id="foo" class="aoba">
aa
</div>

<div id="iframe" class="iframe-block">
a
  <span class="iframe">
    Iframe aqui
  </span>
</div>

CSS

.mobile{
  color: red;
}

JavaScript

$('button').on('click', function() {
    $("#iframe").trigger('classChange');
});

// in another js file, far, far away
$('#myDiv').on('classChange', function() {
  var $div = $("#iframe");
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (mutation.attributeName === "class") {
        var attributeValue = $(mutation.target).prop(mutation.attributeName);
        console.log("Class attribute changed to:", attributeValue);
      }
    });
  });
  observer.observe($div[0], {
    attributes: true
  });

  $div.addClass('mobile');
});