检测DOM元素中的属性变化[重复]答案

【问题标题】：Detecting attribute changes in DOM elements [duplicate]检测DOM元素中的属性变化[重复]
【发布时间】：2014-07-25 15:51:13
【问题描述】：

有什么方法可以检测 CSS 类何时从 DOM 元素中移除？

我有一个<ul>，当这个<ul class="open"> 的open 类被删除时，我需要捕获。

在 Angular 或 jQuery 中执行此操作的任何方式

【问题讨论】：

谁删除了 CSS 类？
几年前好像有人问过类似的问题。我想知道现在是否有任何新信息。 stackoverflow.com/questions/4561845/…
只是为了澄清：你能改变（我想）删除“开放”类的脚本吗？还是只能看 DOM？
不行，修改类的代码完全不在我的控制范围内。

标签： javascript css angularjs events dom

【解决方案1】：

您可以为此编写自定义指令

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: '&'}
  }
})

你可以使用如下

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

【讨论】：

【解决方案2】：

如果您正在谈论监视类属性何时更改而没有任何修改它的人的帮助，那么唯一的方法是：

使用 CSS 完全解决您的问题（当类被移除时，CSS 样式会自动更改）
使用MutationObserver（仅限现代浏览器），您可以在其中注册对该特定属性更改的兴趣。不幸的是，在 IE 11 之前的 IE 中不支持 MutationObservers。

如果您更具体地了解您想要完成的具体内容和/或更改类名的代码，那么我们可能也可以提供一些其他想法。

【讨论】：

【解决方案3】：

你可以用这样的指令$watch class 属性：

.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
        });
    };
});

然后将该指令应用于您的元素。

<ul class="open" watchClass>

（注意：对我来说，除了角度折磨你的 DOM 之外，还有其他任何事情听起来很奇怪）

【讨论】：

我想知道如果属性被$attr.$set()以外的东西更改，attrs['class']是否会更新？
我必须将其更改为 return element.attr('class'); 才能使其正常工作。