how to use variables when setting CSS properties in Jquery?


Tags: jquery,css,jquery-mobile

Problem :

I'm trying to get the following to work:

var $marPad = $('#wrapper').attr('id') == "overthrow" ? 
      ["margin-top", "margin-bottom"] : ["padding-top", "padding-bottom"];

$("#toBeSet").css({ 
    $marPad[0] : "100px", 
    $marPad[1] : "100px"
    })  

This way I was hoping to get by with only a single css setter. However Firebug always tells me I cannot make a CSS selector like so $marPad[0]. It always returns missing : after property id.

Can someone tell me what I'm doing wrong and if it's possible at all to also use variables instead of fixed CSS selectors?

Thanks for help!



Solution :

You need to first create the object, then add properties to it.

var obj = {}; 

obj[$marPad[0]] = '100px';
obj[$marPad[1]] = '100px';

$("#toBeSet").css(obj);

Perhaps better would be to make it part of the conditional statement in the first place...

var $marPad = $('#wrapper').attr('id') == "overthrow" ? 
      {marginTop:'100px', marginBottom: '100px'} : {paddingTop:'100px', paddingBottom:'100px'};

$("#toBeSet").css($marPad);

    CSS Howto..

    How do I make the HTML Slider with CSS stay in the box?

    Using CSS, how do I move a DIV to the left of the centre position?

    css - How to make the view window grows while the user zooms in?

    How to position children with respect to parent in CSS?

    How to change divs placing from horizontal to vertical using css?

    jquery hide/show list elements from ul

    jQuery select- How to change the css style select?

    How to get a different link color on my tumblr static page then my main (front page?)

    How to strikethrough empty div

    Jquery: Show/hide menu with single button

    How to make background of table cell transparent

    How to flip which side a progress bar begins at with CSS

    How To Outline a PNG (Transparent) image with CSS?

    html5, how to style Figure differently for different case?

    how to scale img by percentage of self and not percentage of its container

    How to write multiple css selectors in one line?

    How to hide the “body” statement in css and javascript

    How to fix error from posting html element and prevent it from running

    How to inspect precompiled minified SASS code

    How to know if an element is rendered?

    How to change link color when using jquery mouseover

    Using javascript to show html on every page except one page

    How can I change the path to the css file dynamically?

    How to apply css on checkbox when it's getting disabled?

    newbie css/php question - how to get a div between a label and an input with cakephp

    How to fix layout to browser window without scroll

    How to segregate these divs with 'position:absolute' into different groups?

    How to select only one child element in CSS?

    How to use jQuery's .css() with variable property name?

    How can I create a searchbar like this?