Dynamically creating a javascript/jQuery object to use in the $.css() method

Question

Question:

I'm creating a javascript object to hold css attributes. If I add new variables to the object on the fly, I run into an unknown problem with the jQuery .css() method and nothing happens. However, if I initiate the object with the variables I want to/do change, the .css() method works fine.

In reference to a post I found, is it necessary that I preset the variables of the object, or is there a way to improve my code to be more dynamic?
(If I can find a way to add variables on the fly I would be able to set any css attribute, not just the ones I predetermine.)

---

Extended Explanation:

I'm trying to change the padding and margin values on the fly in my HTML. I have created a function that works based on a similar question. However if I simply create an empty object,

var cssObject = {};

instead of,

var cssObject = {
            padding : "inherit",
            paddingBottom : "inherit",
            paddingLeft : "inherit",
            paddingRight : "inherit",
            paddingTop : "inherit",
            margin : "inherit",
            marginBottom : "inherit",
            marginLeft : "inherit",
            marginRight : "inherit",
            marginTop : "inherit"
          };

When I add each new css attribute to the cssObject, the $.css() method doesn't do anything.

i.e.

    for(...){
      cssObject[cssName] = cssValue;
    };

    // The cssObject has (for loop).length many attributes.
    // Set new css with cssObject

    $(this).css(cssObject);

The cssObject gets created (as viewed in the source code and console logs) but the css of $(this) doesn't change. Adversely, When I create the cssObject with preset variables using all the same code, it executes fine.

Steps of the function:

1. Loop through each HTML objects (i.e. div, etc.) with a class name(s) that contains "setspacing".

2. The class names of the current object are split into an array.

3. Loop through the class names, and stop if the name contains "setspacing".

4. The parts of the current class name are split into an array.

5. Use class name parts to add new attributes to the css object.

Sample HTML Code:

<div class="full-band">
     <div class="inner-wrapper setspacing-margin-right-left-0">
         <h3 class="setspacing-padding-30px">Bleep Blorp!</h3>
    </div>
</div>

jQuery Code:

$("[class*='setspacing']").each(function(){
    var classList = $(this).attr('class').split(" ");

    for (var i = classList.length - 1; i >= 0; i--) {
      if (classList[i].indexOf("setspacing") >= 0) {
        var splitName = classList[i].split("-");

        var cssName=null, cssValue=null;
        var cssObject = {}; /*
            padding : "inherit",
            paddingBottom : "inherit",
            paddingLeft : "inherit",
            paddingRight : "inherit",
            paddingTop : "inherit",
            margin : "inherit",
            marginBottom : "inherit",
            marginLeft : "inherit",
            marginRight : "inherit",
            marginTop : "inherit"
          };*/

        for (var j = 2; j < splitName.length-1; j++) {

          if (splitName.length<=3) {
            cssName = splitName[1];
          } else {
            part = splitName[j].substring(0,1).toUpperCase() + splitName[j].substring(1);
            cssName = splitName[1]+part;
          };

          cssValue = splitName[splitName.length-1]+" !important";
          cssObject[cssName] = cssValue;
        };
        console.log(JSON.stringify(cssObject)); // EDIT : Added after comment
        $(this).css(cssObject);
      };
    };
  });

Console output when empty object is used:

[Log] {"marginTop":"0px !important","marginBottom":"0px !important","marginRight":"0px !important","marginLeft":"0px !important"} (setup.js, line 50)
[Log] {"paddingTop":"0px !important","paddingBottom":"0px !important","paddingRight":"0px !important","paddingLeft":"0px !important"} (setup.js, line 50)
[Log] {"marginTop":"0 !important","marginBottom":"0 !important","marginRight":"0 !important","marginLeft":"0 !important"} (setup.js, line 50)
[Log] {"paddingTop":"0 !important","paddingBottom":"0 !important","paddingRight":"0 !important","paddingLeft":"0 !important"} (setup.js, line 50)

Answer 1

As Wolf said in his comments and according to this SO question, jQuery css() method doesn't support !important, if you try to remove !important part then it will works, here is a JSFiddle to test.

Also the inner for loop var j = 1; j < splitName.length-1; is starting from the 3rd item, so in case of setspacing-padding-30px it will not iterate since the condition j < splitName.length-1; is false.

$("[class*='setspacing']").each(function(){
    var classList = $(this).attr('class').split(" ");

    for (var i = classList.length - 1; i >= 0; i--) {
      if (classList[i].indexOf("setspacing") >= 0) {
        var splitName = classList[i].split("-");

        var cssName=null, cssValue=null;
        var cssObject = {}; /*
            padding : "inherit",
            paddingBottom : "inherit",
            paddingLeft : "inherit",
            paddingRight : "inherit",
            paddingTop : "inherit",
            margin : "inherit",
            marginBottom : "inherit",
            marginLeft : "inherit",
            marginRight : "inherit",
            marginTop : "inherit"
          };*/

        for (var j = 1; j < splitName.length-1; j++) {// start from 2nd item

          if (splitName.length<=3) {
            cssName = splitName[1];
          } else {
            if(j==1) continue; // if it is the 2nd skip..
            part = splitName[j].substring(0,1).toUpperCase() + splitName[j].substring(1);
            cssName = splitName[1]+part;
          };

          cssValue = splitName[splitName.length-1];// remove !imprtant since it is not supported +" !important";
          cssObject[cssName] = cssValue;
        };
        console.log(JSON.stringify(cssObject)); // EDIT : Added after comment
        $(this).css(cssObject);
      };
    };
});