У вас есть триггер для запуска javascript после изменения объекта стиля элемента DOM?

Элемент имеет объект javascript style, который содержит разные имена и значения стилей css. Я хотел бы запускать функцию каждый раз, когда этот объект меняет без использования опроса. Есть ли способ сделать это таким образом, чтобы он совместим с кросс-браузером и будет надежно работать с сторонним кодом (потому что, допустим, вы предоставляете drop-in script)? Связывание события javascript, такого как DOMAttrModified или DOMSubtreeModified, не будет достаточным, поскольку они не работают в Chrome.

Ответ 1

Редактировать 4: Live Demo

$(function() {
  $('#toggleColor').on('click', function() {
    $(this).toggleClass('darkblue');
  }).attrchange({
    trackValues: true,
    callback: function(event) {
      $(this).html("<ul><li><span>Attribute Name: </span>" + event.attributeName + "</li><li><span>Old Value: </span>" + event.oldValue + "</li><li><span>New Value: </span>" + event.newValue + "</li></ul>");
    }
  });
});

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
}
#toggleColor {
  height: 70px;
  width: 300px;
  padding: 5px;
  border: 1px solid #c2c2c2;
  background-color: #DBEAF9;
}
#toggleColor span {
  font-weight: bold;
}
#toggleColor.darkblue {
  background-color: #1A9ADA;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://meetselva.github.io/attrchange/javascripts/attrchange.js"></script>
<p>Click below div to toggle class darkblue.</p>
<div id="toggleColor"></div>

Ответ 2

EDIT2:

Если вы все еще хотите использовать mutation observer, используйте эту библиотеку: mutation-summary

EDIT:

Как я уже сказал в своем ответе ниже, и благодаря Vega для его комментариев, использование таких вещей, как object.watch или mutation observers, не рекомендуется для использования в больших приложениях. это фактическая цитата из MDN:

Обычно вам следует избегать использования watch() и unwatch(), когда возможное. Эти два метода реализованы только в Gecko, и они предназначенный в первую очередь для использования отладки. Кроме того, с использованием точек наблюденияоказывает серьезное негативное влияние на производительность, что особенно верно при использовании в глобальных объектах, таких как окно. Обычно вы можете использовать сеттеры и геттеры или прокси. Подробнее см. В разделе "Совместимость".

Предупреждение

Итак, если совместимость кросс-браузера включена в ваш контрольный список, снова я настоятельно рекомендую переопределить setter и getter объекта style.

используйте object.watch и имейте это в виду для решения с несколькими браузерами:

Вы можете переопределить методы getter и setter объекта style.

Для этого доступен плагин jQuery, jQuery watch

Ответ 3

Я нашел этот маленький плагин, который делает именно это, и его можно изменить, чтобы добавить любую мутацию, которую вы хотите... Даже scrollHeight change listenener.

Плагин: http://www.jqui.net/jquery-projects/jquery-mutate-official/

вот демо: http://www.jqui.net/demo/mutate/

Ответ 4

Даже для всех самых современных браузеров нет кросс-браузерного способа достижения этого. Вам нужно будет перенаправить все изменения стиля css с помощью функции, которая может вызвать прослушиватели событий. Это был бы самый чистый метод.

Ответ 5

В ответе на аналогичный вопрос было высказано предположение, что если вы знаете, что взаимодействия стиля будут выполняться через стандартный интерфейс (т.е. всегда использовать jQuery и т.д..) было предложено, чтобы пользовательские события запускались всякий раз, когда вызывается метод библиотеки.

Это позволило бы использовать более широкую матрицу поддержки, но оставило бы любое изменение свойства проигнорированным, если оно будет выполнено без использования библиотечного метода. Также представляется, что такой подход неприменим к родным сеттерам, поскольку на них нельзя всегда полагаться.

Ответ 6

Вы можете использовать подключить плагин jQuery. Основная функция плагина - связать функцию слушателя при изменении атрибута HTML-элементов.