element.style or window.getComputedStyle() does not showing float

Question

I am trying to copy all element style properties, to another element. (both inline and inheritance) to do so I am using window.getComputedStyle(), but when I am taking all the style values the float value does not exist. I even tried to use element.style and it not exist there.

but when I am using jQuery.css('float') I am getting the right value back, so it's exists for sure!

do you have any solution or smart way to do it?

Answer 1

Two things to consider: window.getComputedStyle() does not work in IE < 9 (docs here). Also, when accessing the float value via element.style, the property is named cssFloat because 'float' is a reserved word in JS (docs here). In IE < 9, the property is named styleFloat.

The reason your example works via jQuery is because jQuery knows of the inherent browser differences when reading calculated styles, and smoothes over them so that you can access them via a consistent API.

element.style maps to the style attribute, which does not consider inherited/external styles. For old IE, the property you want is element.currentStyle, which takes the inherited styles into account.

If you need a solution that does not rely on jQuery, you'll need to check for window.getComputedStyle() and use it if present, and fall-back to element.currentStyle for old IE (using the property styleFloat).

Hope that helps, cheers!