如何使用 jQuery 檢測 CSS 屬性的變化？

使用 jQuery 偵測 CSS 屬性變更的突變事件

在 Web 開發中經常出現偵測 CSS 屬性變更的需求。例如，您可能希望在元素的顯示屬性變更時執行特定操作。然而，確定 jQuery 中的 display 屬性或任何其他 CSS 屬性是否已原生變更可能是一項挑戰。

使用 DOMAttrModified 檢查 CSS 屬性變更

幸運的是， DOM Level 2 事件模組透過突變事件滿足了這一需求。其中一個事件 DOMAttrModified 提供了監視屬性變更（包括樣式變更）的功能。

要使用 DOMAttrModified，您可以實現以下程式碼：

<code class="js">document.documentElement.addEventListener('DOMAttrModified', function(e) {
  if (e.attrName === 'style') {
    console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue);
  }
}, false);

document.documentElement.style.display = 'block';</code>

此程式碼將一個偵聽器附加到DOMAttrModified 事件的根元素 (document.documentElement)。當 style 屬性改變時，監聽器會捕捉先前的值和新值。

Internet Explorer 的替代方案：propertychange

如果您需要支援 Internet Explorer 瀏覽器，您可以利用「propertychange」事件作為 DOMAttrModified 的後備。它可以可靠地檢測 IE 中的樣式變更。

注意：

需要注意的是，突變事件已被棄用，並且可能並非所有瀏覽器都支援。若要獲得更具跨瀏覽器相容性的解決方案，請考慮使用突變觀察器。

以上是如何使用 jQuery 檢測 CSS 屬性的變化？的詳細內容。更多資訊請關注PHP中文網其他相關文章！