How to Listen to a "Style Change" Event

Is it possible to listen to a style change event?

Since jQuery is open-source, I would guess that you could tweak the css function to call a function of your choice every time it is invoked (passing the jQuery object). Of course, you'll want to scour the jQuery code to make sure there is nothing else it uses internally to set CSS properties. Ideally, you'd want to write a separate plugin for jQuery so that it does not interfere with the jQuery library itself, but you'll have to decide whether or not that is feasible for your project.

Set style change event listener in Javascript

You can use MutationObserver

Then code example:

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutationRecord) {
    console.log('style changed!');
  });    
});

var target = document.getElementById('myId');

observer.observe(target, { 
  attributes: true, 
  attributeFilter: ['style'] 
});

Note: this only works with inline styles(any changing of styles), not when the style changes as a consequence of class change or @media change
This is a answer https://stackoverflow.com/a/20683311/3344953

Javascript listen for style changes made in developer-tools

You can access the styles of a HTMLElement using element.style in JavaScript. So you could probably save the styles on page load, check them again when the user initiates a save and compare -- the difference would be the users changes.

As for detecting them as soon as they happen, you can use MutationObserver to get notified of attribute changes on the page. This works for when you add styles to a specific element in the Devtools, but not for editing existing styles and (I think) adding styles to existing selectors. I'm not sure if there is a way to get an event when these change.

Edit: actually, it seems as if checking element.style has the same limits as using MutationObserver: only styles added for the specific element (that is, styles that show up as inline styles in the DOM) show up. There might be a way to actually access all styles, but I'm not aware of it.

HTML detect change on style of element

You may use MutationObserver:

document.querySelector('button').addEventListener('click', function(e) {    var ele = document.getElementById('corps');    if (ele.style.display == 'block')        ele.style.display = 'none';    else        ele.style.display = 'block';});

var observer = new MutationObserver(function(mutationsList, observer) {    for (var mutation of mutationsList){        console.log('The ' + mutation.attributeName + ' attribute was modified.');    }});observer.observe(document.getElementById('corps'), { attributes: true});

<div id="corps" style="display: block;">1111111111111111</div><button>Change div style</button>

How to listen to a change event in all/any of the fields of a certain class?

$(document).on('change', '.field', function() { /* recalculate */ });

How to create event listener that checks style of the div element?

If the change in CSS is done with JavaScript, you can use a MutationObserver to detect the change. It will call the given function every time DOM changes occur to the target element.

const target = document.querySelector('.ol-unselectable');

const observer = new MutationObserver(function(mutations, observer) {
    for(let {type, target} of mutations) {
        if (type === 'attributes' && target.style.display === 'none')
            alert("not displayed")
    }
})

observer.observe(target, {attributes: true})

target.addEventListener('click', () => target.style.display='none')

.ol-unselectable {
  background: blue;
  cursor: pointer;
}

<div class="wrapper">
  <div class="ol-unselectable ol-layers" style="position: absolute; width: 50%; height: 50%; z-index: 0;">
  </div>
</div>

---

Related Topics