1

这有效：

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/

4

6 回答 6

3

在 Javascript 中，当构造一个对象时，您只能将键定义为字符串。这意味着其中的值property1不会property2被传递。相反，字符串 'property1' 和 'property2' 将被传递..

为了克服这个问题，请先创建对象，然后将其全部传递：（工作 jsFiddle）

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

编辑：

我在文档中找不到它来支持我，但情况是这样的：

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

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

于 2013-08-08T00:58:08.987 回答
1

它不起作用的原因是因为您正在设置传递的对象property1而property2不是 and 的实际值property1等property2。这就是 JavaScript 解释对象的方式。

解决这个问题的方法是只使用数组。

var properties = ['width', 'border-top'];

$('.button2').on('click', function() {
    for(var i = 0; i < properties.length; i++)
        $('.greenbox').css(properties[i], '50px');
});
于 2013-08-08T00:59:24.247 回答
0

你的语法是错误的。让您的代码正常工作。

cssObj.css("property1", "50px").css("property2", "50px")

上面的一些答案可能会更优雅地实现您想要做的事情。

于 2013-08-08T01:06:37.787 回答
0

您正在创建一个以文字值“property1”作为键的对象。如果您想采用您正在尝试的方法，请尝试以下操作：

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

var styles = {};
styles[property1] = "50px";
styles[property2] = "50px";

$('.button2').on("click", function(){
    $('.greenbox').css(styles);
});
于 2013-08-08T00:58:31.823 回答
0

问题是您没有正确指定属性名称。当您说 时property1: '50px'，您实际上是在将名为“property1”的属性设置为 50 像素。

http://jsfiddle.net/4KwXa/1/

于 2013-08-08T00:58:40.363 回答
0

以您为对象定义键的方式：“值”。密钥本身不能是变量。

为此，您需要此符号：

var obj[variable]='value';

做我在这里所做的... http://jsfiddle.net/techsin/4KwXa/4/

你需要做这样的事情：

var props={};
    props[property1]= "50px";
    props[property2]= "50px";
于 2013-08-08T01:24:23.773 回答