Чи є спосіб виявити, чи змінено властивість css елемента "display" (на те, чи ні, чи блок, чи вбудований блок ...)? якщо ні, то будь-який плагін? Дякую
Відповіді:
Примітка
Події мутації застаріли з моменту написання цієї публікації, і можуть підтримуватися не всіма браузерами. Замість цього використовуйте спостерігача мутації .
Так, ти можеш. Модуль подій 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 "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, можна використовувати перехідну і подію, наприклад для 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. Чому б не додати туди додаткової логіки?