jQuery.css should accept an array to get multiple properties

[damien]

If css receives no arguments it should return all computed parameters of the given object.

[dmethvin]

What is the use case for this? Can you provide some sample code where it would be useful?

[damien]

e.g. if you want to clone an object and append it to a different scope in the DOM then some styles applied through CSS classes will not work anymore. In case it would be possible to receive all computed styles as an Object sth like that would be possible.

$clone.css($old.css());

I know this could be achieved through getComputedStyle() though a jQuery integration would make sense since it already handles the IE fallbacks for that.

[mikesherov]

I like this too. There are a few places in the dimensions and offset code where we make multiple jQuery.css calls that go to getComputedStyle multiple times where we could be going once.

I imagine that we can also accept an array as the first param with semantics of:

var a = jQuery(elem).css(['float', 'paddingLeft', 'marginLeft');
var b = {
    'float': jQuery(elem).css('float'),
    'paddingLeft': jQuery(elem).css('paddingLeft'),
    'marginLeft': jQuery(elem).css('marginLeft')
};
a === b; //true

If we pass no arguments, we can just scrub every value that is returned by getComputedStyle and normalized. Meaning, prefixed property names get unprefixes, cssFloat gets made to float, etc...

At the very least, I like the version with array of properties passed in.

[dmethvin]

The use of an array of properties is something that has been proposed before, but might be cheap to do across all getter APIs now that gibson042 has refactored jQuery.access. For example you might want to get all four border widths at once.

As to the original proposal, I still am not sure why you'd want to do this. If the original element got its properties from a CSS cascade that included relative measurements, your copy will be nailed to absolute values and thus won't be a faithful copy anyway. Seems like it would be better to just copy the classes and use classes alone for presentational CSS values.

[damien]

Just to copy the classes wouldn't work in a context switch. For example I'm moving objects into a iFrame so I lose the style. Moving the class definitions to the iframe is not an option because I can't be sure if the class is not already i use...

However forget the empty option, I think the array option would be really helpful.

​https://github.com/jquery/jquery/pull/834

[mikesherov]

Damien, I left comments on the PR. While I agree that adding array accessor to jQuery access is tempting, I think we need to consider a perf boost here to be a bigger priority. Your PR does dmethvin's suggestion, which is a good one, but completely blocks us from being able to optimize that code path for speed.

[gibson042]

+1 for further investigation. This has a lot of promise.

[mikesherov]

+1, yes, especially if we can do it in one gCS call: ​http://jsperf.com/getcomputedstyle-perf

[gibson042]

+1

[gnarf]

+1, I've always thought there should be a way to get multiple values out of CSS

[Mike Sherov]

Fixes #11938: Adding array getter method to jQuery.fn.css

Changeset: ef6d8779de9d5959eafc0b9706b90a585aaf7a26