Question

For some reason if I type in:

var i = document.getElementById('fake').style.backgroundPosition;

I get undefined.

However,

document.getElementById('fake').style.backgroundPosition;

by itself, returns the right answer.

Any ideas?

Answer 1

When I use that line of code on an element that actually exists in Chrome, I get i equal to an empty string. You can see that here in this jsFiddle: http://jsfiddle.net/jfriend00/b6syd/.

So, if you are getting undefined, then probably your object “fake” doesn’t exist when you’re running the code.

element.style.backgroundPosition will only return to you an actual inline style settings or programmatically values set for that particular object directly. It won’t return computed styles from stylesheets. If you want to get the current style setting for that attribute, then you need to use something like this:

var i = window.getComputedStyle(document.getElementById('fake'), null).getPropertyValue('background-position');

And, it’s different in IE. This is where a framework like jQuery or YUI is very useful.

In jQuery, it would just be this:

var i = $("#fake").css('backgroundPosition');