Динамическое создание объекта javascript/jQuery для использования в $.метод css ()

Вопрос:

Я создаю объект javascript для хранения атрибутов css. Если я добавляю новые переменные к объекту на лету, я сталкиваюсь с неизвестной проблемой с jQuery .метод css() и ничего не происходит. однако , если я инициирую объект с переменными, которые я хочу / делаю изменить, то .метод css() работает нормально.

в ссылке на сообщение, которое я нашел , необходимо ли мне предварительно задать переменные объекта, или есть способ улучшить мой код, чтобы быть более динамичным?

(Если я найду способ добавлять переменные на лету, я смогу установить любой атрибут css, а не только те, которые я предопределяю.)

Расширенное Объяснение:

Я пытаюсь изменить значения отступов и полей на лету в моем HTML.
Я создал функцию, которая работает на основеаналогичного вопроса . Однако если я просто создам пустой объект,

var cssObject = {};

Вместо,

var cssObject = {

            padding : "inherit",

            paddingBottom : "inherit",

            paddingLeft : "inherit",

            paddingRight : "inherit",

            paddingTop : "inherit",

            margin : "inherit",

            marginBottom : "inherit",

            marginLeft : "inherit",

            marginRight : "inherit",

            marginTop : "inherit"

          };

Когда я добавляю каждый новый атрибут css в объектcssObject , объект $.метод css () ничего не делает.

i.e.



    for(...){

      cssObject[cssName] = cssValue;

    };



    // The cssObject has (for loop).length many attributes.

    // Set new css with cssObject



    $(this).css(cssObject);

Создается cssObject (как показано в исходном коде и журналах консоли), но css $(this) не изменяется. отрицательно, когда я создаю cssObject с предустановленными переменными, используя все тот же код, он выполняется нормально.

Шаги функции:

1. 
   

   Цикл через каждый HTML-объект (например, div и т. д.) с именем класса (ов) это содержит "setspacing".



2. 
   

   Имена классов текущего объекта разбиваются на массив.



3. 
   

   Выполните цикл по именам классов и остановитесь, если имя содержит "setspacing".



4. 
   

   Части текущего имени класса разбиваются на массив.



5. 
   

   Используйте части имен классов для добавления новых атрибутов к объекту css.

Пример HTML-кода:

<div class="full-band">

     <div class="inner-wrapper setspacing-margin-right-left-0">

         <h3 class="setspacing-padding-30px">Bleep Blorp!</h3>

    </div>

</div>

Код JQuery:

$("[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);

      };

    };

  });

Консоль вывод при использовании пустого объекта:

[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)