為什麼在主樣式表中設定'myDiv.style.display”時返回空字串？

主樣式表對顯示樣式的影響

使用HTML 的顯示樣式顯示內容時，必須了解內聯樣式表和主樣式表如何影響其行為。本文探討了 myDiv.style.display 在主樣式表中設定時傳回空字串的問題，這與內嵌設定時不同。

顯示的初始狀態

HTML元素通常以預設顯示值開始，通常是「內聯」。為了涵蓋這一點，開發人員經常使用內聯樣式：

<div>

但是，為了提高可維護性，在主樣式表中設定這些初始樣式是有益的。

意外行為

在主樣式表中設定 display:none 時，元素的初始狀態保持隱藏狀態。但是，使用 JavaScript 存取 myDiv.style.display 最初會傳回一個空字串。這與內聯樣式不同，內聯樣式傳回「none」。

使用getCompulatedStyle 解決了問題

此問題的解決方案在於了解直接存取元素的CSS 屬性（例如，element.style.display）檢索其內聯樣式設定.若要存取外部樣式表或瀏覽器預設值中定義的樣式，開發人員必須使用getComputedStyle 方法：

function getStyle(id, name) {
    var element = document.getElementById(id);
    return element.currentStyle
        ? element.currentStyle[name]
        : window.getComputedStyle
        ? window.getComputedStyle(element, null).getPropertyValue(name)
        : null;
}

var display = getStyle('myDiv', 'display');
alert(display); // prints 'none' or 'block' or 'inline' etc.

透過利用getCompulatedStyle，開發人員可以精確地擷取外部設定的值，包括主樣式表中的值。

以上是為什麼在主樣式表中設定'myDiv.style.display”時返回空字串？的詳細內容。更多資訊請關注PHP中文網其他相關文章！