如何準確存取DOM元素的display屬性？

準確存取 DOM 元素的顯示屬性

檢索 DOM 元素的顯示屬性看似簡單，但可能會出現意想不到的結果。請考慮以下範例：

var a = (document.getElementById('a')).style;
alert(a.display);

此警報可能會顯示空字串，而不是預期的「none」值。為什麼會發生這種情況？

問題在於 CSS 屬性值和套用的樣式之間的差異。

CSS 屬性值與套用的樣式

.style.* 屬性（包括 .display）對應到 CSS 屬性值，而不是套用的樣式。應用的樣式反映了CSS級聯的結果，可能與屬性值不同。

在給定的範例中，元素「a」的顯示屬性在CSS屬性樣式中設定為「none」：

a {
  display: none;
}

但是，由於外部樣式表或動態修改，套用的樣式可能會有所不同。

使用getCompatedStyle

要正確擷取所應用的樣式，請使用 getCompulatedStyle() 方法。它接受一個元素作為參數，並傳回一個包含計算的 CSS 樣式的 CSSStyleDeclaration 物件。

var a = (document.getElementById('a'));
alert(getComputedStyle(a).display);  // Displays "none" as expected

替代方法：類別切換

作為替代方案，請考慮使用用於切換元素可見性的 CSS 類別。這種方法將表現與邏輯分離，避免了直接操作 CSS 屬性的需要。

.hidden {
  display: none;
}

var p = document.getElementById('p');
p.classList.toggle('hidden'); // Toggles the display property

透過使用 getCompulatedStyle 或類別切換，您可以精確存取和控制 DOM 元素的顯示屬性。

以上是如何準確存取DOM元素的display屬性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！