Accessing float property through DOM

Question

I have a DOM element that in Firebug clearly shows a float: left property. But when I process it in the DOM, element.style.float returns undefined.

Am I just overlooking something on my end (this is what I'm assuming right now) or is there a special way to address float? I would be baffled if there were.

Answer 1

Use cssFloat.

Source. http://www.howtocreate.co.uk/tutorials/javascript/domcss

Answer 2

element.style.cssFloat (styleFloat in IE) uses a convention of the browsers to assign attributes as property names in the html engine. Sometimes they work, other times not. keywords can't be property names in a script- class, for, float become className, htmlFor, cssFloat or styleFloat.

The dom syntax is: element.style.getPropertyValue('float'), but that will only work for inline style assignments.

To get any stylesheet defined style you must look deeper:

document.defaultView.getComputedStyle(element,'').getPropertyValue('float');

Note- this is for firefox, opera, chrome, safari. IE has its own methods for style look ups.