Cannot get color of html element using javascript

Question

I cannot get the colour of an html element using javascript until after it has been set in the script. For example:

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

I would expect the first alert to show "Colour: purple" as set in the css and the second to show "Colour: yellow" from the function itself. However, the first alert simply shows "Colour: ". In both cases, the colour of the element is correct and verified using firebug.

possible duplicate of How to get an HTML element's style values in javascript? — Martin
– Martin, Commented Jun 7, 2015 at 11:42

Tigran · Accepted Answer · 2015-06-07 12:23:39Z

2

element.style.property gets only CSS properties assigned directly on the element. To get the actual property value no matter where it was assigned (external stylesheet or inline) use window.getComputedStyle(element).property, where element is a reference to your element.

So in your example it would be:

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

See definition: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

edited Jun 7, 2015 at 12:23

answered Jun 7, 2015 at 11:49

Tigran

3,7451 gold badge24 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gaz01 Over a year ago

Thank you, this lead me in the correct direction. For anybody else finding this, there is a closing braket missing before the semi-colon.

Gaz01 Over a year ago

Almost - this is what worked for me - alert("Colour: " + window.getComputedStyle(header).color);

Leo · Accepted Answer · 2015-06-07 11:44:31Z

1

For elements that are styled via CSS, to get their rendered style, you need to use getComputedStyle.

alert(getComputedStyle(header).color) // the color you want

answered Jun 7, 2015 at 11:44

Leo

13.9k5 gold badges47 silver badges64 bronze badges

Collectives™ on Stack Overflow

Cannot get color of html element using javascript

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related