Có thể nghe một sự kiện thay đổi phong cách của người Viking không?

Có thể tạo một trình lắng nghe sự kiện trong jQuery có thể bị ràng buộc với bất kỳ thay đổi kiểu nào không? Ví dụ: nếu tôi muốn "làm" một cái gì đó khi một phần tử thay đổi kích thước hoặc bất kỳ thay đổi nào khác trong thuộc tính kiểu tôi có thể làm:

$('div').bind('style', function() {
    console.log($(this).css('height'));
});

$('div').height(100); // yields '100'

Nó sẽ thực sự hữu ích.

Có ý kiến ​​gì không?

CẬP NHẬT

Xin lỗi vì đã tự trả lời, nhưng tôi đã viết một giải pháp gọn gàng có thể phù hợp với người khác:

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

Điều này sẽ tạm thời ghi đè phương thức mẫu.css bên trong và xác định lại nó bằng một kích hoạt ở cuối. Vì vậy, nó hoạt động như thế này:

$('p').bind('style', function(e) {
    console.log( $(this).attr('style') );
});

$('p').width(100);
$('p').css('color','red');

Vì jQuery là mã nguồn mở, tôi đoán rằng bạn có thể điều chỉnh csshàm để gọi một hàm bạn chọn mỗi khi nó được gọi (truyền đối tượng jQuery). Tất nhiên, bạn sẽ muốn quét mã jQuery để đảm bảo không có gì khác mà nó sử dụng bên trong để đặt các thuộc tính CSS. Lý tưởng nhất là bạn muốn viết một plugin riêng cho jQuery để nó không can thiệp vào chính thư viện jQuery, nhưng bạn sẽ phải quyết định liệu điều đó có khả thi cho dự án của bạn hay không.

Mọi thứ đã thay đổi một chút kể từ khi câu hỏi được đặt ra - giờ đây có thể sử dụng M mutObserver để phát hiện các thay đổi trong thuộc tính 'style' của một thành phần, không yêu cầu 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'] });

Đối số được truyền cho hàm gọi lại là một đối tượng M mutRecord cho phép bạn nắm giữ các giá trị kiểu cũ và mới.

Hỗ trợ tốt trong các trình duyệt hiện đại bao gồm IE 11+.

Việc khai báo đối tượng sự kiện của bạn phải nằm trong hàm css mới của bạn. Nếu không, sự kiện chỉ có thể được sa thải một lần.

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

Tôi nghĩ rằng câu trả lời tốt nhất nếu từ Mike trong trường hợp bạn không thể khởi chạy sự kiện của mình vì không phải từ mã của bạn. Nhưng tôi nhận được một số lỗi khi tôi sử dụng nó. Vì vậy, tôi viết một câu trả lời mới để cho bạn thấy mã mà tôi sử dụng.

Sự mở rộng

// 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;
    }
})();

Sử dụng

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

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

Tôi đã gặp lỗi vì var ev = new $ .Event ('style'); Một cái gì đó giống như phong cách không được xác định trong HtmlDiv .. Tôi đã xóa nó và bây giờ tôi khởi chạy $ (this) .trigger ("stylechanged"). Một vấn đề khác là Mike đã không trả lại kết quả là $ (css, ..) sau đó Nó có thể gây ra vấn đề trong một số trường hợp. Vì vậy, tôi nhận được kết quả và trả lại nó. Bây giờ hoạt động ^^ Trong mọi thay đổi css bao gồm từ một số lib mà tôi không thể sửa đổi và kích hoạt một sự kiện.

Như những người khác đã đề xuất, nếu bạn có quyền kiểm soát bất kỳ mã nào đang thay đổi kiểu của phần tử, bạn có thể kích hoạt một sự kiện tùy chỉnh khi bạn thay đổi chiều cao của phần tử:

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

Mặt khác, mặc dù khá tốn tài nguyên, bạn có thể đặt bộ hẹn giờ để kiểm tra định kỳ các thay đổi về chiều cao của phần tử ...

Không có hỗ trợ sẵn có cho sự kiện thay đổi kiểu trong jQuery hoặc trong tập lệnh java. Nhưng jQuery hỗ trợ để tạo sự kiện tùy chỉnh và lắng nghe nó nhưng mỗi khi có thay đổi, bạn nên có cách tự kích hoạt nó. Vì vậy, nó sẽ không phải là một giải pháp hoàn chỉnh.

bạn có thể dùng thử Jquery, nó kích hoạt các sự kiện khi css thay đổi và dễ sử dụng

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
  }
});

Câu hỏi thú vị. Vấn đề là chiều cao () không chấp nhận cuộc gọi lại, vì vậy bạn sẽ không thể thực hiện cuộc gọi lại. Sử dụng animate () hoặc css () để đặt chiều cao và sau đó kích hoạt sự kiện tùy chỉnh trong cuộc gọi lại. Dưới đây là một ví dụ sử dụng animate (), đã thử nghiệm và hoạt động ( bản demo ), như một bằng chứng về khái niệm:

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

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

Chỉ cần thêm và chính thức hóa giải pháp của @David từ phía trên:

Lưu ý rằng các hàm jQuery có thể kết nối được và trả về 'cái này' để có thể gọi nhiều lệnh khác nhau (ví dụ: $container.css("overflow", "hidden").css("outline", 0); ).

Vì vậy, mã được cải thiện nên là:

(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
    }
})();

Làm thế nào về jQuery cssHooks?

Có thể tôi không hiểu câu hỏi, nhưng những gì bạn đang tìm kiếm dễ dàng thực hiện cssHooksmà không thay đổicss() chức năng.

sao chép từ tài liệu:

(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/

Tôi đã có cùng một vấn đề, vì vậy tôi đã viết này. Nó hoạt động khá tốt. Trông thật tuyệt nếu bạn kết hợp nó với một số chuyển tiếp CSS.

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