在DOM元素的样式对象发生更改后,您是否可以使用javascript钩子触发器？

Question

元素有一个javascript style对象,其中包含css样式的不同名称和值.我想在每次更改此对象而不使用轮询时触发函数.有没有办法以跨浏览器兼容的方式执行此操作,并且可以与第三方代码可靠地工作(因为假设您提供了一个插件脚本)？将javascript事件绑定为DOMAttrModified或DOMSubtreeModified不足以因为它们无法在Chrome中运行.

Answer 1

编辑4:现场演示

$(function() {
  $('#toggleColor').on('click', function() {
    $(this).toggleClass('darkblue');
  }).attrchange({
    trackValues: true,
    callback: function(event) {
      $(this).html("<ul><li><span>Attribute Name: </span>" + event.attributeName + "</li><li><span>Old Value: </span>" + event.oldValue + "</li><li><span>New Value: </span>" + event.newValue + "</li></ul>");
    }
  });
});

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
}
#toggleColor {
  height: 70px;
  width: 300px;
  padding: 5px;
  border: 1px solid #c2c2c2;
  background-color: #DBEAF9;
}
#toggleColor span {
  font-weight: bold;
}
#toggleColor.darkblue {
  background-color: #1A9ADA;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://meetselva.github.io/attrchange/javascripts/attrchange.js"></script>
<p>Click below div to toggle class darkblue.</p>
<div id="toggleColor"></div>

编辑3:我把所有这些放在一起作为插件可以从git attrchange下载,这里是演示页面.

编辑2:

1. 修复了IE7和IE8中的propertName

编辑1:

1. 处理多个元素
2. 将条件排序为MutationObserver,DOMAttrModified和onpropertychange以实现更好的实现.
3. 为回调添加了修改后的属性名称.

感谢@benvie的反馈意见.

演示: http ://jsfiddle.net/zFVyv/10/(在FF 12,Chrome 19和IE 7中测试过)

$(function() {
    (function($) {
        var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

        function isDOMAttrModifiedSupported() {
            var p = document.createElement('p');
            var flag = false;

            if (p.addEventListener) p.addEventListener('DOMAttrModified', function() {
                flag = true
            }, false);
            else if (p.attachEvent) p.attachEvent('onDOMAttrModified', function() {
                flag = true
            });
            else return false;

            p.setAttribute('id', 'target');

            return flag;
        }

        $.fn.attrchange = function(callback) {
            if (MutationObserver) {
                var options = {
                    subtree: false,
                    attributes: true
                };

                var observer = new MutationObserver(function(mutations) {
                    mutations.forEach(function(e) {
                        callback.call(e.target, e.attributeName);
                    });
                });

                return this.each(function() {
                    observer.observe(this, options);
                });

            } else if (isDOMAttrModifiedSupported()) {
                return this.on('DOMAttrModified', function(e) {
                    callback.call(this, e.attrName);
                });
            } else if ('onpropertychange' in document.body) {
                return this.on('propertychange', function(e) {
                    callback.call(this, window.event.propertyName);
                });
            }
        }
    })(jQuery);

    $('.test').attrchange(function(attrName) {
        alert('Attribute: ' + attrName + ' modified ');
    }).css('height', 100);

});

参考:

1. 检测是否支持DOMAttrModified
2. DOMAttrModified用于chrome
3. 变异观察员
4. 我们为什么要避免使用Mutation事件？
5. onPropertyChange IE

Mutation Observers是DOM4中突变事件的拟议替代品.预计它们将包含在Firefox 14和Chrome 18中

浏览器支持:

onpropertychange - IE中支持(在IE 7中测试)

DOMAttrModified - IE 9,FF和Opera支持

MutationObservers - 非常新,它在Chrome 18中运行良好.不知道它支持多远,还没有在Safari中测试.

感谢@benvie添加有关WebkitMutationObserver的信息