Есть ли способ определить, изменено ли свойство 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
надежно обнаруживать изменения.
class
атрибута (или любого другого атрибута, если селекторы атрибутов присутствуют в CSS) предка элемента также может изменить элемент, поэтому вам придется обрабатывать все DOMAttrModified
события в корневом элементе документа, чтобы будь уверен, что поймал все.
Вы можете использовать плагин 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. Почему бы не добавить туда лишней логики?