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

Question

<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>

第一個和第二個alert只顯示一個空字符串，我認為它應該是none和block 。 但是在 intensally display設置之后，第三個alert終於 alert none了。

但為什么？ 如何正確檢索display屬性？

謝謝。

Answer 1

.style.*屬性直接映射到style屬性，而不是應用的樣式。 為此，您需要getComputedStyle 。

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

Answer 2

您需要元素的顯示屬性的計算值。 你可以得到這個如下。 請注意，大多數瀏覽器都支持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);
}

Answer 3

我建議使用 JavaScript 庫來獲取計算樣式。 例如，使用 jQuery，您可以使用 css() 方法檢索計算樣式...

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

css() 方法是一種跨瀏覽器解決方案，因為它在內部使用樣式對象以及 getComputedStyle 方法和 currentStyle 對象。

Answer 4

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

要檢查是否未顯示某些內容，我會這樣做 ... $('someSelector').is(':visible') ...

如果顯示屬性設置為無，這將返回 false。

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

問題描述

4 個解決方案

解決方案1
40 已采納 2010-09-23 12:30:22

解決方案2
8 2010-09-23 12:38:37

解決方案3
4 2010-09-23 16:30:00

解決方案4
0

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

問題描述

4 個解決方案

解決方案1 40 已采納 2010-09-23 12:30:22

解決方案2 8 2010-09-23 12:38:37

解決方案3 4 2010-09-23 16:30:00

解決方案4 0

解決方案1
40 已采納 2010-09-23 12:30:22

解決方案2
8 2010-09-23 12:38:37

解決方案3
4 2010-09-23 16:30:00

解決方案4
0