Detecting attribute changes in DOM elements

Question

Is there any way to detect when a CSS class is removed from a DOM element?

I have a <ul>, and I need to capture when this <ul class="open"> has its open class removed.

Any way to do this in Angular or jQuery

It looks like a similar question was asked a few years ago. I wonder if there's any new info now. http://stackoverflow.com/questions/4561845/firing-event-on-dom-attribute-change — nwalton, Jul 25 '14 at 15:58
Just to clarify: can you change the (I suppose) script that removes the 'open' class? Or you can only watch the DOM? — Polmonite, Jul 25 '14 at 16:16
No, the code that modifies the class is completely out of my control. — core, Jul 25 '14 at 16:53

jfriend00 · Answer 1 · 2014-07-25T16:03:35.193

If you're talking about monitoring when the class attribute changes without any help from whomever is modifying it, then the only way to do that would be to:

Solve your problem entirely with CSS (where the CSS styles will change automatically when a class is removed)
With a MutationObserver (in modern browsers only) where you can register an interest in that particular attribute change. Unfortunately, MutationObservers are not supported in IE before IE 11.

If you are more specific about what exactly you're trying to accomplish and/or what code is changing the classname, then we could probably offer some other ideas too.

score 1 · Answer 2 · answered Jul 25 '14 at 16:02

you can write custom directive for this

app.directive("isNotOpen", function(){
  var linkFunction = function(scope, element, attrs){
      scope.$watch(
       function() {
          return element.attr('class'); 
       }, function(){
         if(!element.hasClass("open")){
             scope.$eval(scope.isNotOpen)
         }
      });
  };

  return {
   link: linkFunction
   scope: {isNotOpen: '&'}
  }
})

and you can use is like below

 <div class="open" is-not-open="dosomething()">

score 1 · Answer 3 · answered Jul 25 '14 at 16:05

1

You could $watch the class attribute with a directive like this :

.directive('watchClass', function() {
    return function(scope, element, attrs) {
        scope.$watch(function() {
            return attrs['class']; // Or element.attr('class');
        }, function(newValue, oldValue) {
            // Check for open class removal and do something
        });
    };
});

And then apply that directive to your elements.

<ul class="open" watchClass>

(Note: having anything else than angular torturing your DOM sounds weird to me)

answered Jul 25 '14 at 16:05

ThSlyu

26
4

I wonder if the `attrs['class']` will be updated if the attribute is changed by something other than `$attr.$set()`? – runTarm Jul 25 '14 at 16:42
1

I had to change it to `return element.attr('class');` to get it to work. – core Jul 25 '14 at 19:41

Detecting attribute changes in DOM elements

3 Answers3