jquery .css() 不会以编程方式设置多个属性

Question

这有效:

var property1 = "width";

$('.button1').on("click", function(){
    $('.greenbox').css(property1, "200px");
});

但这不是:

var property1 = "width";
var property2 = "border-top";

$('.button2').on("click", function(){
    $('.greenbox').css({
        property1: "50px",
        property2: "50px"
    });
});

为什么？什么是最简单、最快、最流畅的。设置未知数量的多个(未知)属性的最跨浏览器的方式？我知道 值，但我不知道 属性。 :)

http://jsfiddle.net/4KwXa/

Answer 1

在 Javascript 中，构造对象时只能将键定义为字符串。这意味着 property1 和 property2 中的值将不会被传递。.而是字符串“property1” ' 和 'property2' 将被传递..

要克服这个问题，请提前创建对象，然后将其整体传递:( working jsFiddle )

var cssObj = {};
cssObj[property1] = '50px';
cssObj[property2] = '50px';
$('.greenbox').css(cssObj);

编辑:

我在文档中找不到支持我的内容，但情况是这样的:

当您使用以下表示法时:{key1:value1, key2:value2} javascript 将键解析为名称，即使定义了具有相同名称的变量，javascript 也不会传递该值但只有名称 - 这就是它的构建方式 - 键不能作为变量传递。

使用 cssObj[peroperty1] 是有效的，因为我们基本上将对象视为关联数组 - 并且以这种方式允许将键分配为变量。