Bug Tracker

Opened 5 years ago

Closed 4 years ago

#11938 closed feature (fixed)

jQuery.css should accept an array to get multiple properties

Reported by: damien Owned by: mikesherov
Priority: high Milestone: 1.9
Component: css Version: git
Keywords: 1.9-discuss Cc:
Blocked by: Blocking:

Description

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

Change History (15)

comment:1 Changed 5 years ago by dmethvin

Owner: set to damien
Status: newpending

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

comment:2 Changed 5 years ago by damien

Status: pendingnew

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.

comment:3 Changed 5 years ago by 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.

comment:4 Changed 5 years ago by 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.

comment:5 Changed 5 years ago by 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

comment:6 Changed 5 years ago by mikesherov

Component: unfiledcss
Priority: undecidedlow
Status: newopen
Summary: jQuery.css should return all computed parametersjQuery.css should accept an array to get multiple properties
Type: enhancementfeature

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.

comment:7 Changed 5 years ago by dmethvin

Keywords: 1.9-discuss added

comment:8 Changed 5 years ago by dmethvin

Milestone: None1.9

comment:9 Changed 5 years ago by gibson042

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

comment:10 Changed 5 years ago by mikesherov

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

comment:11 Changed 5 years ago by gibson042

+1

comment:12 Changed 5 years ago by gnarf

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

comment:13 Changed 5 years ago by mikesherov

Owner: changed from damien to mikesherov
Status: openassigned

comment:14 Changed 4 years ago by gibson042

Priority: lowhigh

comment:15 Changed 4 years ago by Mike Sherov

Resolution: fixed
Status: assignedclosed

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

Changeset: ef6d8779de9d5959eafc0b9706b90a585aaf7a26

Note: See TracTickets for help on using tickets.