Как получить свойство отображения элемента DOM?

<html>
    <style type="text/css">
        a {
            display: none;
        }
    </style>
    <body>
        <p id="p"> a paragraph </p>
        <a href="#" onclick="location.href='http://www.google.com'; return false;" 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. Однако после интенсивно display, третьего alert окончательного оповещения none.

Но почему? Как я могу правильно получить свойство display?

Спасибо.

Ответ 1

Свойства .style.* отображаются непосредственно на атрибут style , а не на прикладной стиль. Для этого вы хотите getComputedStyle.

Я бы серьезно подумал о переключении .className и полностью отделил презентацию от логики.

Ответ 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);
}

Ответ 3

Я бы рекомендовал использовать библиотеку JavaScript для получения вычисленного стиля. Например, используя jQuery, вы можете получить вычисленный стиль с помощью метода css()...

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

Метод css() - это кросс-браузерное решение, поскольку оно внутренне использует объект стиля и метод getComputedStyle и currentStyle.

Ответ 4

Если вы можете использовать jQuery, существует метод под названием .is

Чтобы проверить, не отображается ли что-то, я бы сделал... $('someSelector').is(':visible')...

Это вернет false, если для атрибута display установлено значение None.