Question

我有一个像这样的HTML：

<html>
    <head>
        <link rel="stylesheet" type="text/css" media="all" href="style.css">
    </head>

    <body>
        <div id="test">Testing</div>

        <script>
            alert(document.getElementById('test').style.display);
        </script>
    </body>
</html>

style.css：

div {
    display:none;
}

我希望js会返回“none”，但它会返回一个空字符串。有没有办法解决这个问题？

Answer 1

这适用于符合标准的浏览器（不是IE - currentStyle / runtimeStyle）。

<body>
    <div id="test">Testing</div>

    <script type="text/javascript">
        window.onload = function() {
            alert(window.getComputedStyle(document.getElementById('test'),null).getPropertyValue('display'));
        }
    </script>
</body>

Answer 2

由于display不是直接设置为样式属性，因此使用上面的代码不会得到它。你必须得到计算值。

您可以参考此页 Get styles

获取值

var displayValue = getStyle("test", "display");

function getStyle(el,styleProp)
{
    var x = document.getElementById(el);
    if (x.currentStyle)
        var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
    return y;
}

Answer 3

CSS尚未加载。将JavaScript包装在“准备就绪”事件中。

<body onload="alert(document.getElementById('test').style.display);">

这对你有用吗？

使用javascript从外部css文件中获取元素的样式

3 个答案: