Как вызвать функцию после изменения стиля элемента dom Javascript/jquery

Question

Я рассмотрел несколько примеров и реализовал то же поведение, что и в примере.

После загрузки страницы, если есть изменение в стиле элемента dom, мне нужно вызвать метод.

Даже если я что-то изменил в консоли браузера, то также должно произойти событие изменения стиля. на событии будет отображаться нет и блок отображения.

В моем коде при изменении в консоли браузера метод изменения не запускается.

Это то, что я пробовал:

(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>

Answer 1

Вы можете использовать MutationObserver:

Демо:

// 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>