Event after applied CSS rules on elements in jQuery/Javascript

Question

Is there an event after CSS rules applied to all elements in the DOM ? i know that the binding $(window).load(), from jQuery, is fired when all js and css files are loaded.

But not when they are applied (there is a small delay of some milliseconds between applying and inlcuding dynamically, such as: $('#design').attr('href', 'style.css') // design is an <link href="otherstyles.css">).

Answer 1

As per here, you could grab the contents of the CSS file with AJAX and then use jQuery's built in complete call to tell when the CSS has loaded.

Answer 2

Such an event does not exist.

• For all attribute changes, you can listen to the DOMAttrModifed mutation event.
• Another option is to monitor specific style properties in an periodic function (interval),

• Another method is to modify the jQuery.fn.css method, to intercept style changes via the jQuery API. This assumes that all relevant CSS property updates are done via jQuery.

  (function($){
      var $css = $.fn.css;
      $.fn.css = function(a,c) {
          if (c == null) return $css.call(this, a);
  
          return this.each(function() {
              var $this = $(this);
              // Your function logic...
              // ...
              // Call original method
              $css.call($this, a, c);
          });
      };
  })(jQuery);