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

Ответ 1

Заметка

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

Да, ты можешь. Модуль событий DOM L2 определяет события мутации; один из них - 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 DOMAttrModified в качестве замены DOMAttrModified. Это должно позволить надежно распознавать изменения style.

Ответ 2

Вы можете использовать подключить плагин 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...
            }
        }
    }
});

Ответ 3

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

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

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

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

Ответ 4

Для свойств, для которых влияет переход css, можно использовать событие перехода, пример для 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>

Ответ 5

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