如何在dom元素样式改变后调用函数Javascript / jquery [英] How to invoke function once the dom element style is changed Javascript/jquery

问题描述

我已经通过了多个例子，并且实现了这个例子所说的相同的行为。

加载页面后，如果dom元素的样式有变化，我需要触发一个方法。

即使我在浏览器控制台中更改了任何内容，也应触发样式更改事件。该事件将显示none和display block。

在我的代码中，如果在浏览器控制台中更改，则更改方法不会被触发。

这是我试过的：

（function（）{var ev = new $ .Event（'style'），orig = $ .fn.css; $ .fn.css = function（）{var ret = orig.apply（this，arguments）; $（this）.trigger（ev）; return ret;}}）（）; $（'p'）。bind（'style'，function（e）{console.log（$（this）.attr（'style '））;}）;

p {display：none ;}

< script src =https：// ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\"></script><p>测试< / p>

解决方案

您可以使用 MutationObserver ：

演示：

//创建一个观察者instancevar observer = new MutationObserver（function（mutations）{mutations.forEach（function（mutation）{var oldDisplay =（mutation.oldValue +''）.match（/ display：\s *（\ w *）/） ; oldDisplay = oldDisplay？oldDisplay [1]：''; if（oldDisplay！== mutation.target.style.display）{console.log（'element'，mutation.target.id，'style.display ='，mutation .target.style.display）;}}）;}）; //将观察者附加到感兴趣的元素：$（'p'）。each（function（）{observer.observe（this，{attributes：true，attributeFilter：['style']，attributeOldValue：true}）;} ）; //通过按钮点击改变style.display来测试它：$（'button'）。click（function（）{$（'p'）。toggle（）; // show / hide}）; code>

< script src =https：//ajax.googleapis。 com / ajax / libs / jquery / 2.1.1 / jquery.min.js>< / script>< p id =p1>测试此< / p><按钮>隐藏/显示< /按钮>

I have gone through multiple examples, and implemented the same behavior what the example has stated.

Once the page is loaded, if there is a change in the styling of the dom element I need to trigger a method.

Even if I change anything in the browser console, then also the style change event should trigger. the event will be on display none and display block.

In my code, if am changing in the browser console then the change method is not getting triggered.

This is what I tried:

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


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

p {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p> test </p>

解决方案

You could use MutationObserver:

Demo:

// create an observer instance
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        var oldDisplay = (mutation.oldValue + '').match(/display:\s*(\w*)/);
        oldDisplay = oldDisplay ? oldDisplay[1] : '';
        if (oldDisplay !== mutation.target.style.display) {
            console.log('element', mutation.target.id, 
                    'style.display=', mutation.target.style.display);
        }
    });    
});
 
// attach the observer to the elements of interest:
$('p').each(function () {
    observer.observe(this, { 
        attributes: true, 
        attributeFilter: ['style'],
        attributeOldValue: true
    });
});

// test it, by changing style.display through button clicks:
$('button').click(function() {
    $('p').toggle(); // show/hide
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="p1"> test this </p><button>hide/show</button>

这篇关于如何在dom元素样式改变后调用函数Javascript / jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！