Có thể nghe sự kiện "thay đổi kiểu" không?

Question

Có thể tạo trình xử lý 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" điều gì đó khi yếu tố thay đổi thứ nguyên 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ó thực sự hữu ích.

Bất kỳ ý tưởng nào?

CẬP NHẬT

Xin lỗi vì trả lời này bản thân mình, nhưng tôi đã viết một giải pháp gọn gàng mà 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); 
    } 
})(); 

này sẽ tạm thời ghi đè phương pháp prototype.css nội bộ và xác định lại nó với 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'); 

Answer 1

Vì jQuery là nguồn mở, tôi đoán bạn có thể tinh chỉnh hàm css để gọi hàm bạn chọn mỗi lần viện dẫn (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 trong nội bộ để thiết lập các thuộc tính CSS. Lý tưởng nhất, bạn muốn viết một plugin riêng biệt 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 xem có khả thi cho dự án của bạn hay không.

Answer 2

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

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

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

Answer 3

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

Answer 4

Như những người khác đã gợi ý, nếu bạn có thể kiểm soát những gì đang thay đổi phong cách của các yếu tố bạn có thể bắn 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'); 

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

Answer 5

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 kích hoạt một lần.

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

Answer 6

Tôi nghĩ câu trả lời hay 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.

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

Cách sử dụng

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

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

tôi đã nhận lỗi vì var ev = new $ .Event ('phong cách'); Một cái gì đó giống như phong cách đã không được xác định trong HtmlDiv .. Tôi gỡ bỏ nó, và tôi khởi động bây giờ $ (this) .trigger ("stylechanged"). Một vấn đề khác là Mike đã không trả về kết quả của $ (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ờ làm việc^^ Trong mỗi thay đổi css bao gồm từ một số libs mà tôi không thể sửa đổi và kích hoạt một sự kiện.

Answer 7

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

Lưu ý rằng chức năng jQuery là thể kết nối và trở lại 'này' để nhiều lời gọi có thể được gọi là một sau khi khác (ví dụ $container.css("overflow", "hidden").css("outline", 0);).

Vì vậy, các mã được cải tiế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 
    } 
})(); 

Answer 8

tôi đã cùng một vấn đề, vì vậy tôi đã viết này. Nó hoạt động khá tốt. Có vẻ tuyệt vời nếu bạn trộn 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 = ''; 
} 

Answer 9

Mọi thứ đã chuyển một chút kể từ khi câu hỏi được hỏi - bây giờ có thể sử dụng một MutationObserver để phát hiện những thay đổi trong 'phong cách' thuộc tính của một phần tử, không có jQuery yêu cầu:

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 chuyển đến hàm gọi lại là đối tượng MutationRecord cho phép bạn giữ các giá trị kiểu cũ và mới.

Hỗ trợ là good in modern browsers bao gồm IE 11+.

Answer 10

bạn có thể thử jquery plugin, nó kích hoạt sự kiện khi css là sự thay đổi và nó dễ dàng để 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 
    } 
});