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

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

5 83
javascript html jquery

5 ответов:

Примечание

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

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

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

86

можно использовать плагин 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...
            }
        }
    }
});
16

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

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

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

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

4

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

$(".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>
3

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

-16