jQuery's .css() implementation

Question

I was looking through the jQuery code and found this line:

elem.runtimeStyle.left = elem.currentStyle.left;

at

https://github.com/jquery/jquery/blob/449e099b97d823ed0252d8821880bc0e471701ea/src/css.js#L169

I am not sure why this is done. Isn't this useless?

Setting the runtimeStyle to the currentStyle would override nothing. Except make the runtimeStyle readable the next time you read it - which doesn't seem needed now.

I understand the overall concept here and why that code block exists (to convert numeric non-pixel values to the appropriate pixel value, by setting the left to the non-pixel value and reading its pixel value and then reverting the left back to the original value).

Edit See my answer below for why I think this is done (with jsFiddle illustration!).

This is one of the times where a why comment would have been appropriate. — Wayne
– Wayne, Commented Jul 6, 2012 at 18:55

Shiv Kumar Ganesh · Accepted Answer · 2012-07-06 19:05:29Z

1

This is actually an IE hack where the value computed by the RHS of the above is feeded into the LHS of the above. ie.We are getting in new value so as to get the computed value out. Check out this blog to know more about it http://jsperf.com/testing-awesome-hack-for-ie

answered Jul 6, 2012 at 19:05

Shiv Kumar Ganesh

3,82510 gold badges50 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aishwar Over a year ago

I might be missing something here, but I don't understand what you mean by "We are getting in new value so as to get the computed value out". Why is this hack done? The jsperf benchmarks seem to show the hack is slower...

Shiv Kumar Ganesh Over a year ago

@Aishwar Its actually reassignment of the value. As in consider. var a=10; var k=20; x(k); function x(a) { a=a; } I guess its kinda this thing

Aishwar · Accepted Answer · 2012-07-16 18:17:34Z

1

I have been thinking about this. Here is why I believe it is done:

Setting the runtimeStyle to the currentStyle ensures that this is style that is applied on the element (the runtime style wins over the inline style). So when you set elem.style.left in the next line, there would be no change in the UI. However, the new pixel value can still be calculated using elem.style.pixelLeft - because this just converts the non-pixel value on the CSS to a pixel value. pixelLeft is not a measurement of the actual position, it is just a conversion to the pixel value.

See this: http://jsfiddle.net/RaSzc/

So this is done to figure out the pixel value without having anything change in the UI

edited Jul 16, 2012 at 18:17

answered Jul 16, 2012 at 18:03

Aishwar

9,75412 gold badges63 silver badges84 bronze badges

Collectives™ on Stack Overflow

jQuery's .css() implementation

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related