Обнаружение событий для изменения свойств CSS с помощью jQuery

В сфере веб-разработки обнаружение изменений свойств CSS элемента может быть имеет решающее значение для реализации динамических обновлений. С помощью jQuery вы можете использовать возможности событий DOM для эффективного мониторинга и реагирования на изменения в свойствах CSS, таких как «отображение».

Использование события DOMAttrModified

Modern браузеры обеспечивают поддержку событий мутации DOM, включая событие DOMattrModified. Это событие специально разработано для уведомления вас об изменении атрибутов элемента, включая свойства CSS, определенные в строке или через внешние таблицы стилей.

Чтобы использовать событие DOMattrModified, вы можете использовать jQuery [ Функция &&&]on(), как показано ниже:

document.documentElement.addEventListener('DOMAttrModified', function(e){
  if (e.attrName === 'style') {
    console.log('prevValue: '   e.prevValue, 'newValue: '   e.newValue);
  }
}, false);

document.documentElement.style.display = 'block';

В этом примере мы присоединяем прослушиватель событий к элементу

document.documentElement, который представляет корень документа. Когда атрибут стиля (например, «display») изменяется, этот обработчик событий срабатывает, позволяя вам получить доступ к предыдущим и текущим значениям измененного атрибута.

Использование события «propertychange» IE

Для старых браузеров, которые не поддерживают

DOMAttrModified, вы можете использовать собственную событие «propertychange» в качестве запасного варианта. Хотя это событие специально поддерживается IE, оно может предоставить надежный метод обнаружения изменений стиля в этих средах.

Чтобы использовать событие

"propertychange", вы можете использовать jQuery on() функция со строковым аргументом, как показано ниже. пример:

document.documentElement.on('propertychange', function(e){
  if (e.propertyName === 'display') {
    console.log('prevValue: '   e.prevValue, 'newValue: '   e.newValue);
  }
}, false);

document.documentElement.style.display = 'block';

Примечание о наблюдателях мутаций

Хотя вышеупомянутые методы были обычными подходами для обнаружения изменений свойств CSS в прошлом, новые браузеры рекомендуют использовать Mutation Observers, которые обеспечивают более стандартизированный и оптимизированный механизм мониторинга изменений определенных элементов DOM.