Question

In a web page I’ve made, I’ve used a style block to define position: absolute for a particular id. I also set the top and left items too. This all works fine.

<style>
#vPage { position: absolute; left: 100px; top: 100px; }
</style>

But when I try to read the value using Javascript:
obj.style.position

alert(document.getElementById("vPage").style.position);

Its value is “”

Why is that? How can I check the style of a page element that was set with the style tag and not set with Javascript FROM Javascript?

The browser I’m using is IE7. Any help is appreciated.

Answer 1

use the following function to get the styles across the browsers, el=your element id and cssprop=any style prop

function getStyle(el, cssprop){
 if (el.currentStyle) //IE
  return el.currentStyle[cssprop]
 else if (document.defaultView && document.defaultView.getComputedStyle) //Firefox
  return document.defaultView.getComputedStyle(el, "")[cssprop]
 else //try and get inline style
  return el.style[cssprop]
}