jQuery - parseFloat returns different values when used

Question

In this code :

$("div#info_holder").css("marginLeft", "100%");
alert(parseFloat($("#info_holder").css("marginLeft")));
alert(parseFloat(document.getElementById("info_holder").style.marginLeft));

the first alert returns 1037.78, the second alert returns 100

why is that?!

Answer 1

It's because the jQuery version is returning the margin as pixels and the native JS is returning the value as a percentage. Take a look at this fiddle, which shoes the values before parseFloat is run.

$("div#info_holder").css("marginLeft", "100%");

console.log($("#info_holder").css("marginLeft"));
console.log(document.getElementById("info_holder").style.marginLeft);

http://jsfiddle.net/ryanbrill/wtABu/

Answer 2

$("#info_holder").css("marginLeft") returns pixel while document.getElementById("info_holder").style.marginLeft read it in percentage.