MyDaftQuestions MyDaftQuestions - 2 months ago 7
Javascript Question

Learning JS - why do my elements not have any styles

I'm struggling with my web page

document.getElementById("btn").addEventListener("click", function(){
var g = document.getElementById("guitar");


.stage {
position:relative; width:400px;height:300px;background:brown;

.guitar {
position:absolute; left:20px; top:10px; width:150px; height:150px; background:#f63f63;


<input type="button" id="btn" value="Do something" />

<div class="stage" id="stage">
<div class="guitar" id="guitar" />

If you note the last line of code, I'm referring to the
for the guitar (I know bad naming etc, I'm just messing about here).

The question I have is, when I put a watch on
and expand the properties and navigate to style, there are none (there are no values in the list of styles). Even the background shows an empty value, yet the HTML is rendering it correctly.

Why can't I see the values in the watch Window?

enter image description here


Your g element doesn't have any style attributes...

You can see all of the style definitions on the 'computed style', as they are regular css declarations, and NOT defined via attributes.