檢索 DOM 元素的顯示屬性：揭示真實值

提供的 HTML 程式碼引入了具有不同顯示的段落和錨點風格。但是，透過 style 屬性檢索這些樣式似乎會導致意外的空字串。為什麼會出現這種情況，如何準確地檢索顯示屬性？

空字串之謎

最初的困惑是因為 .style.*屬性直接映射到樣式屬性，而不是應用的樣式。這意味著您本質上正在檢查內聯樣式聲明，這可能並不總是反映計算的樣式。

解決方案： getCompulatedStyle

取得實際應用的樣式，包括繼承的屬性，都需要使用getComputedStyle方法。此方法採用 DOM 元素作為參數，並傳回包含計算樣式值的 CSSStyleDeclaration 物件。

可以修改提供的程式碼以使用 getCompulatedStyle，如下所示：

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

現在，第一個警報將為錨點標記顯示“none”，第二個警報將為段落元素顯示“block”，第三個警報將顯示有​​意顯示設定後的「無」。這準確地反映了元素的計算顯示樣式。

替代方法：類別切換

您可以考慮使用類別名稱來切換，而不是依賴顯示屬性元素的可見性。透過將表示與邏輯分離，您可以簡化程式碼並使其不易出現與樣式相關的問題。