动态创建要在 $.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. 使用包含“setspacing”的类名循环遍历每个 HTML 对象（即 div 等）。

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)

Answer 1

正如 Wolf 在他的 cmets 中所说并根据 this SO 问题，jQuery css() 方法不支持 !important，如果您尝试删除 !important 部分，那么它会起作用，这里是 @987654322 @ 进行测试。

同样，内部 for 循环 var j = 1; j < splitName.length-1; 是从第 3 项开始的，所以在 setspacing-padding-30px 的情况下它不会迭代，因为条件 j < splitName.length-1; 为 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);
      };
    };
});

Answer 2

我不知道你是否能够修改你的代码，但我想出了这个更简单的替代方案。它使用数据属性而不是类，因此您不必拆分类名。

如下：

http://jsfiddle.net/yn7tB/1/

HTML：

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

Javascript：

$(".setspacing").each(function(){
    var attrib = $(this).data();
    var el = $(this);

    $.each(attrib, function (i, e) { 
        el.css(i,e); 
    });
});