How js listens for element attribute changes

Native js listens for changes in the attribute value of the dom element if the target attribute of the monitor changes. Execute a specific statement.
listens for a specific attribute within the Style of the Dom element, for example, display, is triggered when none, is modified to inline by default

ideas:

1.Object.defineProperty
   set,get
2.Mutation Observer API

problem occurred:

The target of

1.defineProperty monitoring is the object, and the attribute collection [dom.attributes] of the Dom element is also object {}. The attributes object is the object of all the property collections, and style is the subordinate collection in the attribute set, because style has many parameters.

problem: think of dom.attributes as the style, under the object monitoring collection. The statement in the Set method is triggered when the style changes. But during the test, when the value of the display of the picture changed, the set did not trigger, and the test Object.defineProperty did not respond.

    var m=document.getElementById("m").attributes; //{}
    Object.defineProperty(m,"style",{
        get:function () {
            console.log("get:"+m.style);
            return m.style.display;
        },
        set:function (v) {
            console.log("set:"+v);
            m.alt="";
        }
    })

2.Mutation Observer API it waits for all script tasks to be completed before it runs (that is, asynchronous trigger mode). It is not known whether changes can be triggered in real time.

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="test" style="position: relative;" onclick="clickMe()">test</div> <script type="text/javascript"> var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; var element = document.querySelector('-sharptest'); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.type == "attributes") { console.log('mm', new Date().getTime()) console.log("attributes changed", mutation.attributeName) } }); }); observer.observe(element, { attributes: true //configure it to listen to attribute changes }); function clickMe(){ console.log('111', new Date().getTime()) element.style.left = Math.random()* 10 + 'px'; console.log('222', new Date().getTime()) element.style.left = Math.random()* 10 + 'px'; setTimeout(function(){ console.log('333-timeout', new Date().getTime()) element.style.left = Math.random()* 10 + 'px'; }, 2000) console.log('click-end') } </script> </body> </html>