Как повесить обработчик события на изменение css-свойства?

Question

[Dvorak]

Допустим, есть элемент:
<p id='id'>Text</p>
У него по умолчанию

document.querySelector('#id').style.display='block'

Как сделать так, чтобы при изменении свойства display, вызывалась определённая функция? Грубо говоря, надо повесить обработчик события "изменение css-свойства". Заранее спасибо

Answer 1

[Денис]

Смотрим в песочнице

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver,
    config = {
        attributes: true,
        attributeFilter: ['style']
    },
    target = document.getElementById('my_id');

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        console.log(mutation.target.style.display);
    });
});
observer.observe(target, config);

Answer 2

[Николай Антонов]

Можно каждую секунду проверять свойство, через setTimeout. Но лучше переделать, чтоб не пришлось css свойство проверять, например с помощью Promise.

Answer 3

[Павел Волынцев]

Я бы порекомендовал пойти в обратную сторону.
Чтобы поведение страницы реагировало на изменение какой-нибудь переменной в объекте.

Речь идёт о концепции MVVM и библиотеках Angular, Aurelia.

Или React, который обеспечивает рендеринг страницы и его можно привязать к модели в JS