JSFiddle - React, Tailwind, and code Playground

by richbuff

HTML

<body>
  <div id="mydiv">
    Hello, world!!
  </div>
  <button id="stylechange1">Change Color</button>
  <button id="stylechange2">Change Visibilty</button>
</body>

JavaScript

$(document).ready(function() {
  handleload();
});

function handleload() {
  target = document.body;

  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      alert("mutation.type");
      console.log(mutation.type);
    });
  });

  var config = {
    attributes: true,
    childList: true,
    characterData: true
  };

  // pass in the target node, as well as the observer options
  observer.observe(target, config);

  debugger;

  $("#stylechange1").on("click", function() {
  	debugger;
    document.getElementById("mydiv").style.color = "gray";
  });

  $("#stylechange2").on("click", function() {
		document.getElementById("mydiv").style.display = 'none'  });
	}