Question

我正在尝试通过jQuery创建一个响应式设计，它将根据特定的页面宽度调整各种css样式属性的值。不幸的是，当我尝试将变量传递给样式属性的.css（）时，我遇到了麻烦。

以下是相关代码：

if (screenWidth < maxWidth && screenWidth > minWidth) {
    container.css({stylePropToChange: (minValue + widthPercent) + unit});
    //the problem area is here^^^
} else if (screenWidth >= maxWidth) {
    container.css({stylePropToChange: minValue + unit});
} else {
    container.css({stylePropToChange: maxValue + unit});
}

Full code: jsfiddle

此代码中的stylePropToChange变量未被识别为“width”。如果我用字符串“width”替换它，就像这样：

container.css({"width": (minValue + widthPercent) + unit});

......它现在有效。为什么jQuery不接受.css（）的'property name'一侧的变量，但是接受值侧的变量？

我可以做些什么来完成这项工作？

在寻找答案时，我找到this question posted in the jquery forums，其中有人遇到了不同的问题，但他们能以某种方式做我想做的事情。我只是在这里错过了一些简单的东西吗？

Answer 1

您正在使用.css()对象文字。您不能在对象文字中使用变量作为成员名称。如果你想用变量做同样的事情，那就这样做：

container.css(string_variable, value_variable);

如果绝对必须使用对象文字，可以将其定义为变量并使用变量作为成员名称添加属性，然后将其传递给函数：

var obj = {};
obj[string_variable] = value_variable;
obj[string_variable2 = value_variable2;

container.css(obj);

Answer 2

css()的参数是object literal。不可能使用变量来设置对象文字中的属性名称，就像您尝试过的那样（如您所发现的那样）。但你可以尝试这样做：

var obj = {};
if (screenWidth < maxWidth && screenWidth > minWidth) {
    obj[stylePropToChange] = (minValue + widthPercent) + unit;
    obj[anotherStylePropToChange] = 25;
    container.css(obj);
} else if (screenWidth >= maxWidth) {
    ...
} else {
    ...
}

但我会尝试使用媒体查询：https://www.google.com/search?q=media+queries+transition

Answer 3

您无法以这种方式设置javascript对象属性。只需使用：

container.css(stylePropToChange, minValue + unit);

等。如果你想继续这样做。顺便说一下，我真的不明白你为什么不在你的css中使用多个@media查询来做同样的事情。你能解释一下你为什么要在javascript中做到这一点吗？

在jQuery中使用变量作为.css（）样式属性

3 个答案: