javascript - 动态创建要在 $.css() 方法中使用的 javascript/jQuery 对象

Question

问题:

我正在创建一个 javascript 对象来保存 css 属性。如果我即时向对象添加新变量，我会遇到 jQuery .css() 方法的未知问题，但什么也没有发生。 但是，如果我使用我想要/做更改的变量启动对象，则 .css() 方法可以正常工作。

引用 a post I found , 是否有必要预先设置对象的变量，或者有没有办法改进我的代码使其更动态？
(如果我能找到一种动态添加变量的方法，我将能够设置任何 css 属性，而不仅仅是我预先确定的那些。)

---

扩展说明:

我正在尝试在我的 HTML 中即时更改填充和边距值。 我创建了一个基于 similar question 的函数.但是，如果我只是创建一个空对象，

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 已创建(如源代码和控制台日志中所示)，但 $(this) 的 css 没有更改。 相反，当我使用所有相同的代码创建带有预设变量的 cssObject 时，它执行良好。

函数步骤:

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.

示例 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)

Answer 1

正如 Wolf 在他的评论中所说并根据 this所以问题，jQuery css() 方法不支持 !important , 如果您尝试删除 !important部分然后它将起作用，这是一个JSFiddle进行测试。

还有内部 for 循环 var j = 1; j < splitName.length-1;从第三项开始，所以在 setspacing-padding-30px 的情况下它不会迭代，因为条件 j < splitName.length-1;是假的。

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