Detecting style change in target HTML element
We have a single <div> element (our target ). Initially, the color of this <div> is red, then we are going to change its color from red to blue and then blue to green in the intervals of 4 sec and 6 sec. So our objective is to detect the moment when mutation of colors happens using mutation observer API.
Example: First we will change the color of the target within the specified interval using the SetTimeout() function. Now to detect the change, we will use attributes and attributeFilter property of the config option object because we are only changing the color property of the style of the target element.
HTML
<!DOCTYPE html> < html > < head > < title > MutationObserver Example </ title > < style > #colorDiv { width: 100px; height: 100px; /* Giving red color initially to the box */ background-color: red; } </ style > </ head > < body > <!-- Created a box having red color initially --> < div id = "colorDiv" ></ div > < script > function mutationCallback(entries, observer) { const mutation = entries[0]; if (mutation.type === 'attributes' && mutation.attributeName === 'style') { const colorDiv = document .getElementById('colorDiv'); const computedStyle = getComputedStyle(colorDiv); const currentColor = computedStyle.backgroundColor; console.log('Color changed to:', currentColor); } } // Create a mutation observer object const observer = new MutationObserver(mutationCallback); // Start observing the target // node for attribute changes const config = { attributes: true, attributeFilter: ['style'] }; observer.observe(colorDiv, config); // Simulate changing the color after 3 seconds setTimeout(() => { colorDiv.style .backgroundColor = 'blue'; }, 4000); setTimeout(() => { colorDiv.style .backgroundColor = 'black'; }, 6000); </ script > </ body > </ html > |
Explanation: Initially the color was red. After 4 sec, it changed from red to blue, and then after 2 more seconds, changed to green. MutationObserver API is fully able to detect the changes successfully and print color values onto the console.
Output:
Web API Mutation Observer
Mutation Observer is a web API (web APIs are APIs provided by the browser itself) that is used to observe (i.e.; detect) the changes of the target HTML element within a web page. For example, when the user wants to know which element has recently been removed and which element has been added to the DOM, we can use Mutation Observer. In dynamic websites, we know that elements are added, removed, or modified dynamically, this API serves as a tool for tracking and reacting to these changes. In this article, we will see the Mutation Observer in the Web API, along with understanding its benefits, use cases, instance methods, & etc.
Contact Us