jquery: tired of css().css().css()

Question

I'm really tired of syntax like this:

.css('position','absolute').css('z-index',z-index)
.css('border','1px solid #00AFFF').css('margin','-1px 0px 0px -1px')
.css('left',pleft)

I wonder if there's any way to pass all parameters in one function, something like:

.foo('position':'absolute','z-index':z-index,
     'border':'1px solid #00AFFF','margin':'-1px 0px 0px -1px',
     'left':pleft)

Much appreciate any help.

Answer 1

Yes, pass an object to .css() (also mentioned in the docs):

.css({
    position: 'absolute',
    left: pleft,
    zIndex: 123
    ...
});

Note that you can use both syntaxes for the keys: zIndex, i.e. the camelcase version that can be used directly in JavaScript and 'z-index' (quotes required as the - would break things otherwise).

For options that are always the same - in your case probably position, border and margin - it might be a good idea to a classic CSS rule set via a class/id selector. Then you'd just have to set the remaining (dynamic) options via .css().