當在主樣式表中設定顯示時，為什麼「myDiv.style.display」會回傳空字串？

掌握樣式表與內嵌樣式：了解顯示屬性行為

嘗試使用JavaScript 擷取DIV 元素的顯示屬性時，出現差異已顯示被觀察到。將顯示器設定為 HTML 元素內的無內聯，myDiv.style.display 按預期返回「none」。但是，在主樣式表中將顯示定義為 none 會導致透過 myDiv.style.display 存取時出現空字串。

此行為是根據 JavaScript 的操作方式來理解的。透過 JavaScript 存取 DOM 元素時，無法直接取得該元素的計算樣式，因為它是在 CSS 檔案中定義的。

解決方案：利用 getCompulatedStyle

來取得要計算樣式並解決此差異，必須使用 getCompulatedStyle 屬性或 Internet Explorer 的 currentStyle。此屬性檢索所需樣式屬性的計算值。

用於檢索計算樣式的JavaScript 函數

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

用法

利用getStyle 檢索顯示屬性：

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

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