Question

On http://jsfiddle.net/Xs9e2/ there are two elements, named ONE and TWO. The element ONE is positioned by assigning to the style property of the DOM element using JavaScript. The element TWO is positioned using CSS.

The HTML renders as expected.

There is a button one can press to have the left and top properties of each of the two elements alerted. We only see the properties that were set in JavaScript, not the ones set in CSS.

What is the reason for this exactly? Shouldn’t we be able to read the CSS properties via JavaScript? I may have specified something incorrectly. I know about the “offset” properties and I know about JQuery; I’m just puzzled why this old-fashioned DOM manipulation isn’t working as I would expect. What am I missing?

Answer 1

The style attribute is, well, an attribute. That is you can only access the values given in the HTML element’s attribute style:

3.2.3.8 The style attribute

The style IDL attribute must return a CSSStyleDeclaration whose value represents the declarations specified in the attribute. (If the attribute is absent, the object represents an empty declaration.) Mutating the CSSStyleDeclaration object must create a style attribute on the element (if there isn’t one already) and then change its value to be a value representing the serialized form of the CSSStyleDeclaration object. The same object must be returned each time.

Styles given with CSS don’t set the element’s attribute, thus you cannot access it with .style.

However, you can use getComputedStyle.