如何在JQuery中设置CSS属性时使用变量？

我试图让下面的工作：如何在JQuery中设置CSS属性时使用变量？

var $marPad = $('#wrapper').attr('id') == "overthrow" ? 
     ["margin-top", "margin-bottom"] : ["padding-top", "padding-bottom"]; 

$("#toBeSet").css({ 
    $marPad[0] : "100px", 
    $marPad[1] : "100px" 
    })

这样，我希望只有一个CSS二传手度日。然而，Firebug总是告诉我，我无法制作像这样的$ marPad [0]的CSS选择器。它总是返回缺少：属性编号为。

有人可以告诉我我做错了什么，如果有可能也使用变量，而不是固定的CSS选择器？

感谢您的帮助！

来源

2012-04-11 frequent

纠正我，如果我错了，但'$（“＃包装”）ATTR（“身份证”）==“推翻”'永远的回报。假，因为你是通过ID选择一个元素并检查它是否是I D是不是。所以'$ marPad'将始终等于'[“padding-top”，“padding-bottom”]'。 – Jasper 2012-04-11 22:22:36

@jasper - 正确。我只是为了解决这个问题。我正在检查自定义的jqm-data属性，该属性工作正常。 thx指出虽然！ – frequent 2012-04-12 05:36:54

您需要先创建对象，然后将属性添加到它。

var obj = {}; 

obj[$marPad[0]] = '100px'; 
obj[$marPad[1]] = '100px'; 

$("#toBeSet").css(obj);

也许更好的方式是使其在首位的条件语句的一部分......

var $marPad = $('#wrapper').attr('id') == "overthrow" ? 
     {marginTop:'100px', marginBottom: '100px'} : {paddingTop:'100px', paddingBottom:'100px'}; 

$("#toBeSet").css($marPad);

来源

2012-04-11 21:45:46

都很好。第二个解决方案只看起来更好。我原来的代码稍微复杂一些，所以我倾向于第一个版本 – frequent 2012-04-11 21:51:57

尝试：

$("#toBeSet").css($marPad[0], "100px").css($marPad[1], "100px");

来源

2012-04-11 21:45:29 hamczu

这个工作。任何想法如何将多个元素添加到CSS规则中？ – frequent 2012-04-11 21:48:19

我认为这个问题围绕着这个问题的真正问题：为什么语法的行为不如预期？ – nickf 2012-04-11 21:53:24

我认为它的行为像预期的那样，其他答案中有一些很好的补充 - 以这种方式定义对象时，键必须是字符串（可以不带引号 - 这与JSON对象不同）。 – hamczu 2012-04-11 22:29:52

对象中的文字不能使用变量名。创建对象并将属性添加到它：

var o = {}; 
o[$marPad[0]] = "100px"; 
o[$marPad[1]] = "100px"; 

$("#toBeSet").css(o)

来源

2012-04-11 21:46:41 Guffa

，这是一个很好的做法！谢谢！ – frequent 2012-04-11 21:49:23

key部分对象文字定义不计算。也就是说，你不能做这样的事情：

x = { 
    1 + 1: 'foo' 
};

即使你并不总是需要报价，左手侧被视为一个字符串标识符。那么它遵循变量不被评估：

foo = 'bar'; 
x = { 
    foo: 'my value' 
} 
x.bar === undefined; 
x.foo === 'my value';

计算表达式的唯一方法是使用方括号标记：

foo = 'bar'; 
x = {}; // an empty object 
x[foo] = 'my value'; // <-- foo is evaluated, returns the string value 'bar' 

x.bar === 'my value'; 
x.foo === undefined; 

// and to clarify: 
x['foo'] === undefined; 
x[foo] === 'my value'

因此，要直接回答你的问题，因为@am不是我什么说，你应该做这样的事情：

obj = {}; 
obj[$marPad[0]] = "100px"; 
obj[$marPad[1]] = "100px"; 
$('#toBeSet').css(obj);

来源

2012-04-11 21:52:32 nickf

+1尼斯彻底的解释。 – 2012-04-11 21:54:25

从我这里+1！ – frequent 2012-04-11 21:54:48

如何在JQuery中设置CSS属性时使用变量？

回答

相关问题