你能监控 JavaScript 中的样式变化吗？

可以用事件监听器监控样式变化吗？

在前端开发领域，能够响应样式变化动态的价值是无价的。过去，人们一直希望创建一个 jQuery 事件侦听器来跟踪任何样式更改。但是，此功能本身并不可用。

相反，开发了一种解决方法。通过重写 jQuery 的内部 CSS 方法，可以在方法末尾添加一个触发器，以便在发生样式更改时触发事件：

(function() {
    var ev = new $.Event('style'),
        orig = $.fn.css;
    $.fn.css = function() {
        $(this).trigger(ev);
        return orig.apply(this, arguments);
    }
})();

此解决方案提供了一种将事件侦听器绑定到样式更改的方法：

$('p').bind('style', function(e) {
    console.log( $(this).attr('style') );
});

$('p').width(100);
$('p').css('color','red');

MutationObservers 的现代技术

从那时起，技术不断进步，MutationObservers 提供了一种更现代且符合标准的方法来检测“风格”的变化' 属性。现在不需要 jQuery：

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutationRecord) {
        console.log('style changed!');
    });    
});

var target = document.getElementById('myId');
observer.observe(target, { attributes : true, attributeFilter : ['style'] });

大多数现代浏览器都支持此方法，包括 Internet Explorer 11 。通过利用 MutationObserver，您可以有效地监控样式变化并在应用程序中做出适当的响应。

以上是你能监控 JavaScript 中的样式变化吗？的详细内容。更多信息请关注PHP中文网其他相关文章！