Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 10 down vote favorite
1

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.

share|improve this question
1  
Fyi, your code is invalid. z-index is not a valid variable name but z minus index assuming both variables exist; otherwise it's an error. – ThiefMaster♦ May 25 '12 at 12:34
It's for questions like this that api.jquery.com exists. Also, if you're making that many inline CSS changes, setup a stylesheet and simply use addClass("myclass"); – Rory McCrossan May 25 '12 at 12:35
yeah, it's was just an example... I never had such variables :) – Anonymous May 25 '12 at 12:35

3 Answers

up vote 34 down vote accepted

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().

share|improve this answer
Also, see example in the docs: api.jquery.com/css/#example-1-3 – Ayman Safadi May 25 '12 at 12:34
Thanks! this is very useful, it is strange that I missed the docs again.. – Anonymous May 25 '12 at 12:38
up vote 0 down vote 
$(element).css({'position':'absolute','z-index':zIndex,
     'border':'1px solid #00AFFF','margin':'-1px 0px 0px -1px',
     'left':pleft});
share|improve this answer
use .css({}); ... – ThulasiRam May 25 '12 at 12:38
Still contains the z-index error the OP had. – ThiefMaster♦ May 25 '12 at 12:39
up vote 9 down vote

Define style in separate class

css

.myCustomClass
{
     position: absolute;
     border: 1px solid #00AFFF
}

And js

.addClass('myCustomClass');

And this is very simple to manage if styles go too complex

share|improve this answer
1  
Doesn't answer his question and doesn't work if he needs some dynamic values. He still needs .css() for them. – ThiefMaster♦ May 25 '12 at 12:36
@ThiefMaster anyways, for certain situations this is pretty good solution, worth mentioning :) – archil May 25 '12 at 12:39
that's correct ThiefMaster, I've been using classes for other purposes - but this is not the case – Anonymous May 25 '12 at 12:39

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.