Действительно ли возможно слушать событие “изменения стиля”?
Действительно ли возможно создать слушателя события в jQuery, который может быть связан с какими-либо изменениями стиля? Например, если я хочу сделать что-то, когда элемент изменяет размеры или любые другие изменения в атрибуте стиля, я мог сделать:
$('div').bind('style', function() {
console.log($(this).css('height'));
});
$('div').height(100); // yields '100'
Это было бы действительно полезно.
Какие-либо идеи?
ОБНОВЛЕНИЕ
Извините за ответ на это самостоятельно, но я записал аккуратное решение, которое могло бы соответствовать кому-то еще:
(function() {
var ev = new $.Event('style'),
orig = $.fn.css;
$.fn.css = function() {
$(this).trigger(ev);
return orig.apply(this, arguments);
}
})();
Это будет временное переопределение внутренний prototype.css метод и переопределение его с триггером в конце. Таким образом, это работает как это:
$('p').bind('style', function(e) {
console.log( $(this).attr('style') );
});
$('p').width(100);
$('p').css('color','red');
4 ответа
Поскольку jQuery - это открытый источник, я думаю, что вы можете настроить функцию CSS , чтобы вызвать функцию по вашему выбору каждый раз, когда она вызывается (передается объект jQuery ). Конечно, вы захотите пролить код jQuery, чтобы убедиться, что больше ничего не использует внутри, чтобы установить свойства CSS. В идеале, вы хотите написать отдельный плагин для jQuery, чтобы он не вмешивался в саму по себе библиотеку jQuery, но вам придется решить, возможно, это возможно для вашего проекта.
Как предложили другие, если у вас есть контроль над тем, какой код меняется в стиле элемента, вы можете выстрелить на заказ событие при изменении высоты элемента:
$('#blah').bind('height-changed',function(){...});
...
$('#blah').css({height:'100px'});
$('#blah').trigger('height-changed');
в противном случае, хотя красивый ресурс -Используемый, вы могли бы установить таймер для периодической проверки на изменение высоты элемента ...
Нет встроенной поддержки для изменения стиля событие в jQuery или в сценарии Java. Но jQuery поддерживает создание пользовательского события и слушать его, но каждый раз, когда есть изменения, у вас должен быть способ вызвать его на себя. Так что это не будет полным решением.
Интересный вопрос. Проблема в том, что высота () не принимает обратный вызов, поэтому вы не сможете выстрелить обратный вызов. Используйте Animate (), либо CSS (), чтобы установить высоту, а затем вызвать пользовательское событие в обратном вызове. Вот пример с использованием анимации (), протестированных и работ ( демонстрация ), как доказательство концепции:
$('#test').bind('style', function() {
alert($(this).css('height'));
});
$('#test').animate({height: 100},function(){
$(this).trigger('style');
});