javascript - DOM元素的样式对象更改后，您是否可以使用javascript钩子(Hook)触发器？

元素具有一个javascript style对象，该对象包含css样式的不同名称和值。我想每次此对象更改时都触发一个函数，而不使用轮询。有什么方法可以跨浏览器兼容并且可以与第三方代码可靠地工作(因为假设您提供的是嵌入式脚本)吗？绑定(bind)诸如DOMAttrModified或DOMSubtreeModified之类的JavaScript事件无法满足要求，因为它们在Chrome中不起作用。

最佳答案

编辑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下载的插件，这是demo page。

编辑2:

修复IE7和IE8中的propertName

编辑1:

处理多个元素

将条件排序为MutationObserver，DOMAttrModified和onpropertychange，以实现更好的实现。

向回调添加了修改后的属性名称。

感谢@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);

});

引用:

Detect if DOMAttrModified supported

DOMAttrModified for chrome

Mutation Observer

Why should we avoid using Mutation events?

onPropertyChange IE

浏览器支持:
onpropertychange-在IE中受支持(在IE 7中经过测试)
DOMAttrModified-在IE 9，FF和Opera中受支持
MutationObservers-非常新，可以在Chrome 18中正常工作。不确定它支持多远，尚未在Safari中进行测试。

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