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

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

Источник

5 ответов

Решение

Заметка

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

Да, ты можешь. Модуль 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';

Вы также можете попробовать использовать событие "propertychange" в IE в качестве замены 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...
            }
        }
    }
});
Источник

Вы можете использовать JQuery's css функция для проверки свойств 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. Почему бы не добавить дополнительную логику там?

Источник
Другие вопросы по тегам