动态创建要在$.css（）方法中使用的javascript/jQuery对象 问题:

我正在创建一个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被创建（在源代码和控制台日志中查看），但是$（this）的css没有改变相反，当我使用所有相同的代码创建带有预设变量的cssObject时，它执行得很好。

函数的步骤：

使用包含“setspace”的类名循环遍历每个HTML对象（如div等）

当前对象的类名被拆分为一个数组

循环遍历类名，如果名称包含“setspace”，则停止

当前类名的各个部分被拆分为一个数组

使用类名部分向css对象添加新属性

示例HTML代码：

---

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

详情如下:

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>

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

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

---

正如Wolf在他的评论中所说的，根据SO问题，jQuery css（）方法不支持

！重要信息

，如果您试图删除

！重要的

部分，然后它将工作，这里是一个测试

此外，内部for循环

var j=1；j从第3项开始，因此在
setspace-padding-30px
的情况下，它不会迭代，因为条件
j为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);
      };
    };
});

$（“[class*='setspace']”）。每个（函数（）{
var classList=$（this.attr（'class'）.split（“”）；
对于（var i=classList.length-1；i>=0；i--）{
if（classList[i].indexOf（“setspace”）>=0）{
var splitName=classList[i]。拆分（“-”；
var cssName=null，cssValue=null；
var cssObject={}/*
填充：“继承”，
填充底部：“继承”，
paddingLeft：“继承”，
paddingRight:“继承”，
paddingTop:“继承”，
页边空白：“继承”，
marginBottom：“继承”，
marginLeft：“继承”，
marginRight：“继承”，
玛金托普：“继承”
};*/
对于（var j=1；j如果（splitName.lengthPlease发布
console.log（JSON.stringify（cssObject））的结果；
jQuery css（）方法不支持
！important
语句。也就是说，您应该使用
data-*
属性，而不是在css中使用类将特定数据设置为元素或根据类设置样式
<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>

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

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

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