Как запустить функцию при изменении какого-либо css-свойства?

Question

[miniven]

Пытаюсь использовать jQuery. Задача такая: запустить функцию тогда, когда значение display сменится с none на block. Как отследить это событие?

Answer 1

[GreatRash]

Значение с none на block поменяет какой-то скрипт? Значит там же рядом и запустить функцию.

Comments

[Евгений Калибров]

или там же кинуть событие, которое уже отслеживать везде где нужно

Answer 2

[eSelf]

Вариант для IE 11+
Можно использовать MutationObserver, чтобы отследить изменения в style аттрибуте.

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutationRecord) {
        console.log('Стили изменились!');
    });    
});

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

Можно использовать этот плагин

$("#myDiv").attrchange({
    trackValues: true, // set to true so that the event object is updated with old & new values
    callback: function(evnt) {
        if(evnt.attributeName == "display") { // which attribute you want to watch for changes
            if(evnt.newValue.search(/inline/i) == -1) {

                // your code to execute goes here...
            }
        }
    }
});

Answer 3

[Петр]

CSS свойства как правило не меняются, а вот значения атрибутов у обьектов изменяются.
Это можно отследить с помощью MutationObserver

Answer 4

[frees2]

Пример

......
$(document).ready(function(){
    if ($('#t').css('display') == 'block') {
        ////
    } else {
       /// ваш код примерно так {$('#ms').css({'bottom':'2%'} );
    }
});

Comments

[tommy_13]

это же поверка по загрузке, а не изменению