Detect an inline Style/CSS change on an element via JQuery

Question

For the following Element, I am trying to detect a inline style change:

<div class="webform-component--personal-details" style="display: none;">
 <p> This that this that.</p>
</div>

In the above example, style could be either style="display: none;" or style="display: block;" Here is what I tried, but it didn't work:

$('.webform-component--personal-details').on('stylechanged', function () {
    console.log('css changed');
});

May I ask why you want to detect the change/why you aren't able to trigger whatever action this will trigger in the same place the inline style is being changed from none->block or vice versa? — TCooper, Jun 28 '19 at 21:53
There's no `stylechanged` event in JavaScript, where did you get that from? — Barmar, Jun 28 '19 at 21:55
In general, JavaScript uses events for things that happen asynchronously, such as user actions and AJAX responses. Most things that are done by JavaScript code don't trigger events automatically. — Barmar, Jun 28 '19 at 21:57
For instance, the `change` event occurs when the user changes an input field, not when you assign to the field's `.value` property in JS. — Barmar, Jun 28 '19 at 21:58
You can set up a mutation observer. https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver — connexo, Jun 28 '19 at 21:58

score 0 · Answer 1 · answered Jun 28 '19 at 22:18

If you want to fire the stylechanged event after calling the css function of jQuery then you should override the css function first as @MikeAllen and @ccsakuweb has written in their answers here & here:

// Extends functionality of ".css()"
// This could be renamed if you'd like (i.e. "$.fn.cssWithListener = func ...")
(function() {
    orig = $.fn.css;
    $.fn.css = function() {
        var result = orig.apply(this, arguments);
        $(this).trigger('stylechanged');
        return result;
    }
})();


// Add listener
$('div#box').on('stylechanged', function () {
    console.log('stylechanged: ','The css changed');
});

$('button').on('click',function(){
  // Perform change
  $('div#box').css('background', 'red');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="box" style="background:blue;height:100px;"></div>
<button>Change Color</button>

Or

use the MutationObserver without jQuery need as @codebox mentioned in his answer here:

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

var target = document.getElementById('box');
observer.observe(target, { attributes : true, attributeFilter : ['style'] });


function changeColor() {
  document.getElementById("box").style="background:red;height:100px;";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box" style="background:blue;height:100px;"></div>
<button onclick="changeColor()">Change Color</button>

Detect an inline Style/CSS change on an element via JQuery

1 Answers1

Or