Bug Tracker

Ticket #11938 (closed feature: fixed)

Opened 3 years ago

Last modified 2 years ago

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:
Blocking: Blocked by:

Description

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

Change History

comment:1 Changed 3 years ago by dmethvin

  • Owner set to damien
  • Status changed from new to pending

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

comment:2 Changed 3 years ago by damien

  • Status changed from pending to new

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 3 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 3 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 3 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 3 years ago by mikesherov

  • Priority changed from undecided to low
  • Status changed from new to open
  • Type changed from enhancement to feature
  • Component changed from unfiled to css
  • Summary changed from jQuery.css should return all computed parameters to jQuery.css should accept an array to get multiple properties

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 3 years ago by dmethvin

  • Keywords 1.9-discuss added

comment:8 Changed 2 years ago by dmethvin

  • Milestone changed from None to 1.9

comment:9 Changed 2 years ago by gibson042

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

comment:10 Changed 2 years ago by mikesherov

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

comment:11 Changed 2 years ago by gibson042

+1

comment:12 Changed 2 years ago by gnarf

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

comment:13 Changed 2 years ago by mikesherov

  • Owner changed from damien to mikesherov
  • Status changed from open to assigned

comment:14 Changed 2 years ago by gibson042

  • Priority changed from low to high

comment:15 Changed 2 years ago by Mike Sherov

  • Status changed from assigned to closed
  • Resolution set to fixed

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

Changeset: ef6d8779de9d5959eafc0b9706b90a585aaf7a26

Note: See TracTickets for help on using tickets.