我可以使用MutationObserver偵聽計算樣式的更改嗎？

我可以使用MutationObserver偵聽計算樣式的更改嗎？我有一個寬度爲100％的div，我想知道它的計算寬度何時改變，但目前爲止沒有成功。我可以使用MutationObserver偵聽計算樣式的更改嗎？

document.getElementById("myDiv").style.width = "200px"

但是如果界面是通過一個窗口大小調整，或者如果父DIV調整大小調整它不工作：如果我改變風格務實的工作MutationObserver。

任何解決方案，不涉及超時？

更新：我特別感興趣的解決方案，也不會涉及偵聽窗口大小調整事件，因爲有時界面更改沒有窗口大小調整。例如，具有百分比作爲寬度和父節點大小的div發生更改。

來源

2015-09-23 fromvega

支持給人以jQuery的'寬一試（）'函數 – Vineet

它必須是自動 – fromvega

是寬度函數將計算寬動態 – Vineet

支持觀察風格的變化是in discussion。現在你可以利用轉換。這個想法是爲元素的寬度（或其他）添加一個css轉換。過渡期應該幾乎爲零，所以你不會注意到它。

轉換完成後，會觸發一個transitionend事件。爲該事件添加一個偵聽器。現在，只要寬度發生變化，轉換就會開始，立即結束，事件將會觸發。這意味着你的聽衆會被調用。

#myDiv { 
    ... 
    transition: width 0.01s; 
} 

$("#myDiv").on("transitionend", function() { ... });

通過IE10 +

來源

2015-09-23 21:21:22 zeroflagL

這很有趣，但它仍然不適用於間接更改。如果一個div的寬度爲百分比，並且父節點大小發生變化，則不會發生轉換。 – fromvega

@fromvega這是真的:(另一方面，這種變化總是在** some **事件的前面，無論是窗口大小調整還是父元素的直接風格變化。事件難以處理的唯一情況是元素越來越多（例如添加內容），但是您始終有一個不涉及超時的解決方案，而不是一個直接的解決方案如果您想根據大小進行某種佈局更改，則大部分時間都可以使用只有CSS，可能有一些媒體查詢。理想情況下，大小的變化不應該關注你。 – zeroflagL

我可以使用MutationObserver偵聽計算樣式的更改嗎？

回答

相關問題