當內聯樣式覆蓋主樣式表設定時，如何使用 JavaScript 存取計算樣式？

使用JavaScript 從主樣式表存取樣式

在主樣式表中將div 的顯示屬性設為「none」並嘗試使用myDiv.style.display 透過JavaScript 存取它，您可能會遇到空白回傳值。這是因為內聯樣式和計算樣式之間有差異。

內聯樣式直接在 HTML 元素本身上設置，而計算樣式是套用於元素的所有樣式的組合，包括在外部樣式表或父元素。當存在內聯樣式時，它會覆蓋任何衝突的計算樣式。

當您透過 JavaScript 存取元素的樣式屬性時，您只能讀取內嵌樣式。因此，如果您在主樣式表中將 display 屬性設為“none”，但有內聯樣式覆寫它，則 myDiv.style.display 會傳回空字串。

要存取計算的樣式，您需要使用 getComputedStyle() 函數。此函數傳回一個對象，其中包含元素的所有計算樣式，包括在外部樣式表或父元素中設定的樣式。

以下範例說明如何使用getCompulatedStyle() 擷取計算的顯示屬性：

var display = getComputedStyle(myDiv).display;

透過使用getCompulatedStyle()，您可以存取元素的計算樣式，即使它已被內聯樣式覆蓋。

以上是當內聯樣式覆蓋主樣式表設定時，如何使用 JavaScript 存取計算樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！