如何準確檢索 DOM 元素的 Display 屬性以及為什麼 .style 屬性可能會傳回空字串

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

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

空字串之謎

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

解決方案： getCompulatedStyle

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

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

<code class="javascript">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);</code>

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

替代方法：類別切換

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

以上是如何準確檢索 DOM 元素的 Display 屬性以及為什麼 .style 屬性可能會傳回空字串的詳細內容。更多資訊請關注PHP中文網其他相關文章！