Why are all of my DOM element properties coming back as empty strings?

Question

There must be something simple I'm missing. I'm using only vanilla Javascript to return DOM element properties. The problem is, I'm only getting empty strings when I try to get any style property from my DOM elements.

Here is a snippet of my HTML:

<div class="parent">
   <div class="child js-child">
   </div>
</div>

Here is the CSS:

.parent {
   position: relative;
}

.child {
   position: absolute;
   right: -220px;
   top: 0;
   transition: all 0.5s ease;
}

Some JS code:

window.addEventListener("load", function(){
   var element = document.getElementsByClassName("js-child")[0];
   var rightPosition = element.style.right;
});

When I put in a debugger and check the value, rightPosition = "".

It should be rightPosition = "-220px". No matter what property I'm trying to get, it all comes back as "" (I've tried checking the display, top property, and several others).

I want to run a simple if statement, if (rightPosition === "-220px"), but it's always coming back as an empty string, so the if statement doesn't check out.

When I look in the chrome inspector, all of the CSS is set properly and working.

Any ideas as to why I'm only getting empty strings?

Thanks!

You need to get the computed style of the element instead of direct CSS style. — Praveen Kumar Purushothaman, Jun 22 '17 at 15:01
Thanks everyone, I had never heard of computed style before. You guys are the best!!! — crestinglight, Jun 22 '17 at 15:04

score 3 · Accepted Answer · answered Jun 22 '17 at 15:00

You can use getComputedStyle and getPropertyValue. element.style will refer to the style attribute on the element (inline styles), and your CSS isn't inline.

window.addEventListener("load", function(){
   var element = document.getElementsByClassName("js-child")[0];
   var rightPosition = window.getComputedStyle(element).getPropertyValue('right');
  console.log(rightPosition)
});

.parent {
   position: relative;
}

.child {
   position: absolute;
   right: -220px;
   top: 0;
   transition: all 0.5s ease;
}

<div class="parent">
   <div class="child js-child">
   </div>
</div>

score 1 · Answer 2 · answered Jun 22 '17 at 15:02

1

The style property of an element represents the inline style attribute of the element's html. What you're looking for is the computed style

var rightPosition = window.getComputedStyle(element).getPropertyValue('right');

answered Jun 22 '17 at 15:02

Musa

96,336
17
118
137

score 0 · Answer 3 · answered Jun 22 '17 at 15:02

You can't get external css from JS directly. Use getComputedStyle and then getPropertyValue.

window.addEventListener("load", function(){
   var element = document.getElementsByClassName("js-child")[0];
   var rightPosition = window.getComputedStyle(element,null).getPropertyValue('right');
   console.log(rightPosition);
});

.parent {
   position: relative;
}

.child {
   position: absolute;
   right: -220px;
   top: 0;
   transition: all 0.5s ease;
}

<div class="parent">
   <div class="child js-child">
   Hello world
   </div>
</div>

Reference : https://stackoverflow.com/a/2558076/2427065

score -2 · Answer 4 · answered Jun 22 '17 at 15:04

-2

Presa CTRL + F5 to clear the cash Then try, if it doesn't work, try to set the variables outside the addEventListener function just to test the code, Also delete the var keyword to set the variables global .. and check :)

answered Jun 22 '17 at 15:04

S3FaQ El

3
3

Why are all of my DOM element properties coming back as empty strings?

4 Answers4