jQuery中.css()的参数怎么传递一个变量+字符串的属性值

Question

原代码：

$bars[i].style.top =160 - height + sinTable[(ang + (i * freq)) & 4095] * height + 'px';
$bars[i].style.height = height2 + 'px';

但是觉得.style好像很少见，所以打算换成用.css来实现：

var style={
    top:160 - height + sinTable[(ang + (i * freq)) & 4095] * height + 'px',
    height:height2 + 'px'
};
$bars[i].css(style);

为了方便直接传递一个变量（不用加引号），就直接定义了一个变量传参。但没有任何效果。单独定义变量分别传入也不行。
想知道如果要用.css()来实现的话应该怎么传入参数

Answer 1

最后一句改成：
$bars.eq(i).css(style);

有道是，“文档看的少，风吹就要倒。”

Answer 2

要DOM操作，是要$bars[i]（指向DOM），但你要用jq的css()时，直接$bars.css(style)即可。

Answer 3

楼上说的是对的。

实际上，jQuery 在这里应用了设计模式中的“享元模式”，即用一套共享的数据降低大量重复性内容的内存和运算损耗。所以 $('.bar') 实际上取出来了所有 DOM 节点，然后返回的 $bars 并非 DOM Collection，而是一个 jQuery 实例，它是一个类数组对象，包含很多方法，比如 .css(attr, value)。

所以你应该用 $bars.css(style)。

另外，理论上 $bars[i] 会返回一个 DOM 节点，你直接调用 .css() 方法会报错，建议你养成“不正常先看控制台”的习惯，对将来会有很大帮助。

Answer 4

真的有看过一眼jQuery的Api么。。
http://www.w3school.com.cn/jq...

$bars.css({
 top:...,
 height:...
})

顺便style就是不用jQuery的时候直接写原生JS用的啊，写法有四种：

$bars[i].style.height=...;//设置单个属性
$bars[i].style.cssText='height:...; top:...;';//设置多个属性
$bars[i].setAttribute('style', 'height:...;top:...');
$bars[i].style.setProperty('height', '...');