Javascript not returning style properties

Question

I have a simple script that is getting the color of the text in an element and printing it to the console. However, when I run the script, I'm getting an empty string rather than the actual color. Can anyone explain to me why and how to fix it?

HTML

<div id="scrollingTextHolder">
    <p id="scrollingText">Hello</p>
</div>

CSS

#scrollingText{
    margin-top: 5%;
    color: black;
}

JS

window.addEventListener("load", function(){
    console.log(document.getElementById("scrollingText").style.color);
})

Pen

Nenad Vracar · Accepted Answer · 2016-05-08T13:13:15.790

0

You can use getComputedStyle() and getPropertyValue(), also color is returned as rgb(R,G,B)

var a = document.getElementById("scrollingText");
console.log(window.getComputedStyle(a).getPropertyValue('color'))

#scrollingText {
  margin-top: 5%;
  color: black;
}

<div id="scrollingTextHolder">
  <p id="scrollingText">Hello</p>
</div>

edited May 08 '16 at 13:13

answered May 08 '16 at 13:07

Nenad Vracar

118,580
15
151
176

Awesome, thank you for actually providing help instead of just giving a link to a similar question that doesn't actually provide any help. – May 08 '16 at 13:16
`:)` you're welcome. – Nenad Vracar May 08 '16 at 13:16

Javascript not returning style properties

1 Answers1