Чи можна слухати подію "Зміна стилю"?

Чи можливо створити слухач подій у 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');

Оскільки jQuery є відкритим кодом, я б припустив, що ви можете налаштувати cssфункцію, щоб викликати функцію на ваш вибір кожного разу, коли вона викликається (передаючи об’єкт jQuery). Звичайно, ви захочете прокрутити код jQuery, щоб переконатися, що немає нічого іншого, яке він використовує внутрішньо для встановлення властивостей CSS. В ідеалі, ви хочете написати окремий плагін для jQuery, щоб він не заважав самій бібліотеці jQuery, але вам доведеться вирішити, чи можливо це для вашого проекту чи ні.

З моменту запитання все змінилося трохи - тепер можна використовувати MutationObserver для виявлення змін в атрибуті елемента 'style', не потрібен jQuery:

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutationRecord) {
        console.log('style changed!');
    });    
});

var target = document.getElementById('myId');
observer.observe(target, { attributes : true, attributeFilter : ['style'] });

Аргумент, який передається функції зворотного виклику, є MutationRecord об'єктом який дозволяє отримати старі та нові значення стилів.

Підтримка хороша в сучасних браузерах, включаючи IE 11+.

Декларація об'єкта події повинна знаходитись у вашій новій функції css. Інакше подія може бути запущена лише один раз.

(function() {
    orig = $.fn.css;
    $.fn.css = function() {
        var ev = new $.Event('style');
        orig.apply(this, arguments);
        $(this).trigger(ev);
    }
})();

Я вважаю, що найкраща відповідь, якщо від Майка у випадку, коли ви не можете запустити свою подію, оскільки це не з вашого коду. Але я отримую деякі помилки, коли я ним користувався. Тому я пишу нову відповідь, щоб показати вам код, який я використовую.

Розширення

// Extends functionality of ".css()"
// This could be renamed if you'd like (i.e. "$.fn.cssWithListener = func ...")
(function() {
    orig = $.fn.css;
    $.fn.css = function() {
        var result = orig.apply(this, arguments);
        $(this).trigger('stylechanged');
        return result;
    }
})();

Використання

// Add listener
$('element').on('stylechanged', function () {
    console.log('css changed');
});

// Perform change
$('element').css('background', 'red');

Я отримав помилку, оскільки var ev = new $ .Event ('style'); Щось на зразок стилю не було визначено в HtmlDiv .. Я його видалив, і я запускаю зараз $ (this) .trigger ("stylechanged"). Ще одна проблема полягала в тому, що Майк не повернув результат $ (css, ..), то він може створити проблеми в деяких випадках. Так я отримую результат і повертаю його. Тепер працює ^^ У кожну зміну css включають деякі libs, які я не можу змінювати та викликати подію.

Як вважають інші, якщо у вас є контроль над тим, який код змінює стиль елемента, ви можете запустити спеціальну подію, змінивши висоту елемента:

$('#blah').bind('height-changed',function(){...});
...
$('#blah').css({height:'100px'});
$('#blah').trigger('height-changed');

В іншому випадку, хоч і досить ресурсомістке, ви можете встановити таймер, щоб періодично перевіряти зміни на висоту елемента ...

Немає вбудованої підтримки для події зміни стилю в jQuery або в сценарії java. Але jQuery підтримує створення власної події та прослуховування її, але щоразу, коли відбувається зміна, у вас має бути спосіб викликати її на собі. Тож це не буде повним рішенням.

ви можете спробувати плагін Jquery, він запускає події, коли css змінюється та його простий у використанні

http://meetselva.github.io/#gist-section-attrchangeExtension

 $([selector]).attrchange({
  trackValues: true, 
  callback: function (e) {
    //console.log( '<p>Attribute <b>' + e.attributeName +'</b> changed from <b>' + e.oldValue +'</b> to <b>' + e.newValue +'</b></p>');
    //event.attributeName - Attribute Name
    //event.oldValue - Prev Value
    //event.newValue - New Value
  }
});

Цікаве запитання. Проблема полягає в тому, що висота () не приймає зворотний дзвінок, тому ви не зможете запустити зворотний дзвінок. Використовуйте або animate () або css (), щоб встановити висоту, а потім запустити власну подію у зворотному дзвінку. Ось приклад використання анімаційних (), випробуваних та робіт ( демонстраційних ) як доказів концепції:

$('#test').bind('style', function() {
    alert($(this).css('height'));
});

$('#test').animate({height: 100},function(){
$(this).trigger('style');
}); 

Просто додавання та формалізація рішення @David зверху:

Зауважте, що функції jQuery можна змінити і повернути "це", щоб декілька викликів можна було викликати один за одним (наприклад, $container.css("overflow", "hidden").css("outline", 0); ).

Отже, вдосконалений код повинен бути:

(function() {
    var ev = new $.Event('style'),
        orig = $.fn.css;
    $.fn.css = function() {
        var ret = orig.apply(this, arguments);
        $(this).trigger(ev);
        return ret; // must include this
    }
})();

Як щодо jQuery cssHooks?

Можливо, я не розумію питання, але те, що ви шукаєте, легко зробити cssHooks, не змінюючиcss() функції.

копія з документації:

(function( $ ) {

// First, check to see if cssHooks are supported
if ( !$.cssHooks ) {
  // If not, output an error message
  throw( new Error( "jQuery 1.4.3 or above is required for this plugin to work" ) );
}

// Wrap in a document ready call, because jQuery writes
// cssHooks at this time and will blow away your functions
// if they exist.
$(function () {
  $.cssHooks[ "someCSSProp" ] = {
    get: function( elem, computed, extra ) {
      // Handle getting the CSS property
    },
    set: function( elem, value ) {
      // Handle setting the CSS value
    }
  };
});

})( jQuery ); 

https://api.jquery.com/jQuery.cssHooks/

У мене була така ж проблема, тому я написав це. Це працює досить добре. Чудово виглядає, якщо ви змішуєте його з деякими переходами CSS.

function toggle_visibility(id) {
   var e = document.getElementById("mjwelcome");
   if(e.style.height == '')
      e.style.height = '0px';
   else
      e.style.height = '';
}