首頁 >web前端 >js教程 >您可以使用 JavaScript 檢測元素中的樣式變更嗎?

您可以使用 JavaScript 檢測元素中的樣式變更嗎?

Mary-Kate Olsen
Mary-Kate Olsen原創
2024-11-11 03:46:02651瀏覽

Can You Detect Style Changes in Elements Using JavaScript?

使用MutationObserver 監聽樣式變化

問題:
是否可以監聽 我使用事件樣式變化在語言中使用事件樣式變化監聽器的元素?例如,您可以使用 jQuery 檢測元素尺寸何時改變嗎?

答案:

是的,MutationObserver 是一個現代瀏覽器API,使您能夠觀察元素的變化元素的屬性,包括它的

實作:

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

範例:

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

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

這會輸出以下:

width: 100px;
color: red;

支援:

MutationObserver 在現代瀏覽器中得到廣泛支持,包括IE 11 。

以上是您可以使用 JavaScript 檢測元素中的樣式變更嗎?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn