Обнаружение события при изменении свойства css с помощью JQuery

Есть ли способ определить, изменено ли свойство css элемента "display" (на none, block или inline-block ...)? если нет, то какой плагин? Благодарность

Заметка

События мутации устарели с момента написания этого поста и могут поддерживаться не всеми браузерами. Вместо этого используйте наблюдатель мутаций .

Да, ты можешь. Модуль DOM L2 Events определяет события мутации ; один из них - DOMAttrModified - тот, который вам нужен. Конечно, они не получили широкого распространения, но поддерживаются по крайней мере в браузерах Gecko и Opera.

Попробуйте что-нибудь в этом роде:

document.documentElement.addEventListener('DOMAttrModified', function(e){
  if (e.attrName === 'style') {
    console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue);
  }
}, false);

document.documentElement.style.display = 'block';

Вы также можете попробовать использовать событие IE "propertychange" вместо DOMAttrModified. Это должно позволить styleнадежно обнаруживать изменения.

Вы можете использовать плагин attrchange jQuery . Основная функция плагина - привязать функцию слушателя к изменению атрибута HTML-элементов.

Пример кода:

$("#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...
            }
        }
    }
});

Вы можете использовать cssфункцию jQuery для проверки свойств CSS, например. if ($('node').css('display') == 'block').

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

Также рассмотрите возможность добавления классов CSS, чтобы добиться желаемого поведения. Часто вы можете добавить класс к содержащему элементу и использовать CSS для воздействия на все элементы. Я часто накладываю класс на элемент body, чтобы указать, что ответ AJAX ожидает обработки. Затем я могу использовать селекторы CSS, чтобы получить желаемое отображение.

Не уверен, что это то, что вы ищете.

Для свойств, на которые влияет css-переход, можно использовать событие transitionend, например для z-index:

$(".observed-element").on("webkitTransitionEnd transitionend", function(e) {
  console.log("end", e);
  alert("z-index changed");
});

$(".changeButton").on("click", function() {
  console.log("click");
  document.querySelector(".observed-element").style.zIndex = (Math.random() * 1000) | 0;
});

.observed-element {
  transition: z-index 1ms;
  -webkit-transition: z-index 1ms;
}
div {
  width: 100px;
  height: 100px;
  border: 1px solid;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="changeButton">change z-index</button>
<div class="observed-element"></div>

Вы не можете. CSS не поддерживает «события». Осмелюсь спросить, для чего вам это нужно? Посмотрите этот пост здесь, на SO. Я не могу придумать причину, по которой вы захотите связать мероприятие с изменением стиля. Я предполагаю, что изменение стиля инициируется где-то еще фрагментом javascript. Почему бы не добавить туда лишней логики?