當在單獨的檔案中定義 CSS 樣式時，為什麼「element.style」會回傳空值？

理解JavaScript 中的CSS 樣式屬性

在JavaScript 中引用CSS 樣式屬性時，開發者經常會遇到一個意想不到的問題：element.style 傳回空儘管在CSS 檔案中定義了樣式，但這些值仍然存在。本文旨在闡明這種行為並解釋其發生的原因。

內聯樣式和計算樣式之間的區別

JavaScript 的 element.style 屬性提供對內聯樣式的存取直接在 HTML 元素中定義。但是，當 CSS 樣式在 CSS 檔案中單獨定義時，它們不被視為內聯樣式。相反，它們成為計算樣式。

計算樣式：套用值

計算樣式表示在考慮所有繼承樣式、CSS 規則後套用於元素的實際樣式屬性和瀏覽器預設值。若要在 JavaScript 中存取運算樣式，請使用 getCompulatedStyle() 函數。

空 element.style 值的說明

element.style 只包含內嵌樣式。由於 CSS 樣式不是內聯定義的，因此無法透過 element.style 存取它們，因此傳回空值。

範例：

<div>

#test {
  display: block;
}

console.log(document.getElementById('test').style.display); // Returns ""

使用getCompulatedStyle 來計算樣式

樣式屬性，包括CSS 中定義的屬性，請使用getCompulatedStyle():

console.log(window.getComputedStyle(document.getElementById('test')).display); // Returns "block"

以上是當在單獨的檔案中定義 CSS 樣式時，為什麼「element.style」會回傳空值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！