Question

在脚本中设置之前，我无法使用javascript获取html元素的颜色。例如：

<html>
<head>
    <style media="screen" type="text/css">
        h1 {
            color: purple;
        }
    </style>
    <script type="text/javascript">
        function test() {
            var header = document.getElementsByTagName("h1")[0];
            alert("Colour: " + header.style.color); // Does not get the correct colour
            header.style.color = "yellow";
            alert("Colour: " + header.style.color); // Gets the correct colour
        }
    </script>
</head>
<body onload="test();">
    <h1>Header</h1>
</body>
</html>

我希望第一个提醒显示＆＃34;颜色：紫色＆＃34;如在css中设置，第二个显示＆＃34;颜色：黄色＆＃34;来自功能本身。但是，第一个警报只显示＆＃34;颜色：＆＃34;。在这两种情况下，元素的颜色都是正确的，并使用firebug验证。

Answer 1

对于通过CSS设置样式的元素，要获得其渲染样式，您需要使用getComputedStyle。

UserID

Answer 2

element.style.property仅获取直接在元素上分配的CSS属性。要获取实际属性值，无论它被分配到何处（外部样式表或内联），都使用window.getComputedStyle(element).property，其中element是对元素的引用。

所以在你的例子中它将是：

alert("Colour: " + getComputedStyle(header).color);

参见定义：https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

使用javascript

2 个答案: