为什么以下工作?
<something>.stop().animate( { 'top' : 10 }, 10 );
而这不起作用:
var thetop = 'top'; <something>.stop().animate( { thetop : 10 }, 10 );
为了更清楚:目前我无法将 CSS 属性作为变量传递给 animate 函数。
{ thetop : 10 }是一个有效的对象字面量。该代码将创建一个对象,其属性名为thetop,其值为 10。以下两者是相同的:
{ thetop : 10 }
thetop
obj = { thetop : 10 }; obj = { "thetop" : 10 };
在 ES5 及更早版本中,您不能将变量用作对象文字内的属性名称。您唯一的选择是执行以下操作:
var thetop = "top"; // create the object literal var aniArgs = {}; // Assign the variable property name with a value of 10 aniArgs[thetop] = 10; // Pass the resulting object to the animate method <something>.stop().animate( aniArgs, 10 );
ES6将 ComputedPropertyName 定义为对象文字语法的一部分,它允许您编写如下代码:
var thetop = "top", obj = { [thetop]: 10 }; console.log(obj.top); // -> 10
您可以在每个主流浏览器的最新版本中使用这种新语法。