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]是有效的，因为我们基本上将对象视为关联数组 - 并且允许以这种方式将键指定为变量。

Answer 2

它不起作用的原因是因为您设置的对象是property1和property2，而不是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');
});

Answer 3

您正在创建一个以文字值“property1”为键的对象。如果你想采取你正在尝试的方法，试试这个：

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

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

$('.button2').on("click", function(){
    $('.greenbox').css(styles);
});

Answer 4

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

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

Answer 5

你的语法错了。为了让您的代码正常工作。

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

上面的一些答案可能会达到你想要做的更优雅。

Answer 6

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

为此你需要这个表示法：

var obj[variable]='value';

做我在做的事情...... http://jsfiddle.net/techsin/4KwXa/4/

你需要做这样的事情：

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

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

6 个答案: