Trigger a function upon the addition or removal of a CSS class

Question

Trigger a function upon the addition or removal of a CSS class

Introduction - no jQuery allowed!

I am in search of a way to track changes made to a specific DOM element that I can access using:

var el = document.getElementById('the-element');

Whenever a CSS class is added or removed from the el, I need the name of the CSS class to be sent to a function.

I am open to alternative solutions that are practical and effective.

For instance:

el.onClassChange(updateFunction);

function updateFunction(classname, status) {
    console.log('The classname is '+classname+' - '+status);
}

javascript css

Answer 1

Answer №1

<!DOCTYPE html>
<html>
<body>

<p id = "elementToChange" changing=false>Press the button to activate a function that will display "Hello World" in a p element with id="output".</p>

<button onclick="modifyElement()">Click here</button>

<p id="output"></p>

<script>
function modifyElement() {

 var targetElement = document.getElementById("elementToChange");

 targetElement.classList.add("newClassName"); 
 targetElement.changing = true;

 targetElement.onchange();
}

document.getElementById("elementToChange").onchange = function(){
  if(this.changing){
     alert("Element modified");
     // perform an action upon element modification
     this.changing = false; // reset the changing indicator attribute
  }
}


</script>

</body>
</html>

Answer 2

<!DOCTYPE html>
<html>
<body>

<p id = "elementToChange" changing=false>Press the button to activate a function that will display "Hello World" in a p element with id="output".</p>

<button onclick="modifyElement()">Click here</button>

<p id="output"></p>

<script>
function modifyElement() {

 var targetElement = document.getElementById("elementToChange");

 targetElement.classList.add("newClassName"); 
 targetElement.changing = true;

 targetElement.onchange();
}

document.getElementById("elementToChange").onchange = function(){
  if(this.changing){
     alert("Element modified");
     // perform an action upon element modification
     this.changing = false; // reset the changing indicator attribute
  }
}


</script>

</body>
</html>

Trigger a function upon the addition or removal of a CSS class

Answer №1

Similar questions

I am experiencing issues with my camera not capturing photos

Is it possible to implement a validation process that prevents the opening of a modal using data-bs-target until all necessary

Issue with Socket.IO: socket.on not executed

Is there a way to convert a PHP array into a JavaScript object and return it?

Why does IntelliJ IDEA 2016 show an error for using the [ngSwitch] attribute in this Angular2 template?

js-libp2p works by establishing connections between nodes without initiating a new stream

How can I eliminate the CSS value that was inherited?

I have a flex box with an image and text line inside. How can I adjust the width of the box and text to automatically match the size of the image?

Scrolling feature is not effective in lower resolutions

Arranging my table

Dynamic navigation menu with Bootstrap's responsive multi-level design

Script for migrating MongoDB attributes to an array

Waiting for the initial render before using document.getElementById() in next.js

Using Selenium to interact with a Modal Dialog window

A subtle X icon tucked away in the corner of the homepage, a result of the jquery modal window

Translating a Javascript array into VBScript

Guide to setting up a Cordova and TypeScript project using the command line interface

Create a d3 map specifically for a selected region based on the provided latitude and longitude coordinates

Is it possible to manipulate videos embedded in an iframe using javascript?

Function for calling a CSS callback with jQuery