如何檢索DOM元素的顯示屬性？

<html> 
    <style type="text/css"> 
     a { 
      display: none; 
     } 
    </style> 
    <body> 
     <p id="p"> a paragraph </p> 
     <a href="http://www.google.com" id="a">google</a> 
    </body> 
    <script type="text/javascript"> 
     var a = (document.getElementById('a')).style; 
     alert(a.display); 
     var p = (document.getElementById('p')).style; 
     alert(p.display); 
     p.display = 'none'; 
     alert(p.display); 
    </script> 
</html>

不是一個空字符串，我認爲應該是none和block第一和第二alert顯示沒有其他。但是內涵display設置後，第三個alert最後提醒none。如何檢索DOM元素的顯示屬性？

但是爲什麼？我如何正確檢索display屬性？

謝謝。

來源

2010-09-23 Jichao

的.style.*屬性直接映射到style屬性，不給應用的樣式。爲此，你需要getComputedStyle。

我會認真考慮切換.className並將演示文稿與邏輯完全分開。

來源

2010-09-23 12:30:22 Quentin

風格不應該被稱爲屬性。這是一個對象。每個DOM元素節點都有一個style屬性。該屬性是一個對象。 ... HTML樣式屬性用於向表示HTML元素的DOM節點的style屬性添加屬性。一旦HTML代碼被解析，我們就不再有HTML屬性，而是對象屬性。 – 2010-09-23 12:34:29

@ŠimeVidas：我想如果你重讀大衛的回答，你會發現他正確地劃分了這個區別。 – 2010-09-23 12:35:53

@David Dorward：謝謝你的幫助。那麼'style'屬性的用法是什麼，因爲它不能反映CSS樣式的實時變化？ – Jichao 2010-09-23 12:36:51

您需要該元素的顯示屬性的計算值。你可以得到這個如下。請注意，大多數瀏覽器都支持window.getComputedStyle()而在IE中最接近的是元素的currentStyle屬性：

var el = document.getElementById('a'); 
var styleObj; 

if (typeof window.getComputedStyle != "undefined") { 
    styleObj = window.getComputedStyle(el, null); 
} else if (el.currentStyle != "undefined") { 
    styleObj = el.currentStyle; 
} 

if (styleObj) { 
    alert(styleObj.display); 
}

來源

2010-09-23 12:38:37

如果你可以使用jQuery，有一個叫.is

要檢查如果沒有顯示什麼方法，我會做... $('someSelector').is(':visible') ...

如果display屬性設置爲None，這將返回false。

來源

2010-09-23 12:40:20

我建議使用JavaScript庫來獲取計算風格。例如，使用jQuery可以檢索計算樣式與CSS（）方法...

$("#a").css("display");

的CSS（）方法是一個跨瀏覽器解決方案，它在內部使用的樣式對象和兩個方法的getComputedStyle和currentStyle對象。

來源

2010-09-23 16:30:00

如何檢索DOM元素的顯示屬性？

回答

相關問題