jQuery .css("left") returns "auto" instead of actual value in Chrome

Question

I have div element with left and top defined, without absolute position, and I want to read the left and top values using jQuery.

Using $("#MyId").css("left") gave the expected result in IE browser (IE8) but in Chrome it returned "auto" instead, although the values are explicitly written in the element style.

Here is the test case: http://jsfiddle.net/qCDkb/2/

Note the difference between IE and Chrome.

Also, this is working well in jQuery 1.4.2 and "failing" in jQuery 1.4.3 and above.

Any insights are welcome. :-)

It stands to reason that returning `auto` is the correct behaviour, as `position: static` doesn't listen to the `left` attribute. — Pekka, Nov 25 '10 at 14:35
As verified here, notice the position is now 150px to the left. http://jsfiddle.net/qCDkb/3/ Position: relative added to the css. — Gazler, Nov 25 '10 at 14:37
@Pekka - I don't want the actual position, for this I can use .position().left - I'm after the value defined in the CSS for that element.. — Shadow Wizard Says No More War, Nov 25 '10 at 14:37
Seems like a misuse of css. You should use data() for this. http://api.jquery.com/jQuery.data/ — Gazler, Nov 25 '10 at 14:38
@Gazler - I don't want to actually position the element 150 pixels to the left. I want those values there only as "flag" for using later. Probably the wrong approach.. :/ — Shadow Wizard Says No More War, Nov 25 '10 at 14:39
@Shadow in that case, you should be able to get that using `$("#MyId")[0].style.left` but `data()` might be an even better idea as @Gazler suggessts — Pekka, Nov 25 '10 at 14:39
@Pekka good point, but ( still can't understand why jQuery is failing to read this value in Chrome and succeeds in IE. — Shadow Wizard Says No More War, Nov 25 '10 at 14:46
@Shadow yeah. I added what I know (or think) as an answer, maybe it helps — Pekka, Nov 25 '10 at 14:51
Also you should check your css. If you gave the element "right" property chrome and IE does not allow you to change the "left" property with jquery. — Serdar Akkılıç, Aug 24 '12 at 13:23
@Serdar no, you are not correct. See [this live example](http://jsfiddle.net/JsYJm/) to prove you wrong. — Shadow Wizard Says No More War, Aug 24 '12 at 20:22

score 15 · Answer 1 · edited Mar 22 '15 at 12:20

15

Try $("your selector").position().top;

edited Mar 22 '15 at 12:20

nicael

17,612
12
55
87

answered Dec 10 '12 at 03:30

Steven Benjamin

199
1
4

1

You can see this yourself [in the fiddle](http://jsfiddle.net/qCDkb/237/). Not working, always returning 0 as it returns the actual position while I want to read the value I have defined inline for the element. – Shadow Wizard Says No More War Dec 10 '12 at 07:42
1

Worked for me in Chrome and FF. – Flat Cat Jan 05 '13 at 04:23
Note the "rendering" sequence comes into play here as well http://stackoverflow.com/questions/1324568/is-document-ready-also-css-ready – samus Dec 03 '15 at 17:41

score 13 · Answer 2 · answered Nov 25 '10 at 15:16

13

It is strange behavior for jQuery. But you can use native javascript methods to get css values:

$("#Panel1")[0].style.left

This expression will return corresponding css property.

answered Nov 25 '10 at 15:16

vtambourine

2,039
3
18
26

1

This only works for inline CSS. The correct way is here http://stackoverflow.com/a/20733569/607874 – Jose Rui Santos Dec 22 '13 at 20:44

Pekka · Accepted Answer · 2010-11-25T14:53:39.483

10

As discussed in the comments, setting left to auto for a position: static sounds somehow right, seeing as left has no meaning in the context.

As to why Chrome and IE return different values: .css() provides a unified gateway to the browsers' computed style functions, but it doesn't unify the way the browsers actually compute the style. It's not uncommon for browsers to decide such edge cases differently.

As to why jQuery 1.4.2 and 1.4.3 do this differently, I do not know for sure, but there's this in 1.4.3's release notes:

Nearly the entire CSS module has been rewritten focusing entirely on extensibility. You can now write custom CSS plugins that extend the functionality provided by .css() and .animate().

edited Nov 25 '10 at 14:53

answered Nov 25 '10 at 14:48

Pekka

431,103
135
960
1,075

Thanks, looks like the best explanation I can get. :-) – Shadow Wizard Says No More War Nov 25 '10 at 15:19
You need to hide the element before reading the property. Check it out here http://stackoverflow.com/a/20733569/607874 – Jose Rui Santos Dec 22 '13 at 20:36

score 0 · Answer 4 · answered Sep 16 '13 at 01:24

I know this is an old post, but I ran into this same problem and thought I would suggest a couple of solutions. It seems that this problem is not specific to Chrome, as I was able to reproduce in Firefox as well.

I was able to solve this one of two ways. Either place you CSS styles in the same file as your HTML, instead of using a separate CSS file. OR, call the function inside of window.onload. Looks like the values are not available to the browser until everything has loaded, IF the styles are in an external style sheet.

Hope this is helpful.

score 0 · Answer 5 · answered Jun 30 '11 at 20:44

0

add

position: absolute;

or

position: relative;

to the element you use left on

answered Jun 30 '11 at 20:44

montrealmike

11,143
8
63
85

I know, the whole point is the element can't have this. (that's why "without absolute position" is in bold in the question) – Shadow Wizard Says No More War Jun 30 '11 at 20:56
1

hehe, apparently not bold enough. My bad – montrealmike Jul 12 '11 at 22:01

jQuery .css("left") returns "auto" instead of actual value in Chrome

5 Answers5

Linked