用addClass( ),removeClass( )与CSS()方法，哪种效率比较高？

Question

因为看到一段这样的代码：

.lv1 {
    background-position : 0 -13px;
}
.lv2 {
    background-position : 0 -25px;
}
.lv3 {
    background-position : 0 -37px;
}
.lv4 {
    background-position : 0 -49px;
}
.lv5 {
    background-position : 0 -61px;
}
.lv6 {
    background-position : 0 -73px;
}
.lv7 {
    background-position : 0 -85px;
}
.lv8 {
    background-position : 0 -97px;
}
.lv9 {
    background-position : 0 -109px;
}
.lv10 {
    background-position : 0 -121px;
}
.lv11 {
    background-position : 0 -133px;
}
.lv12 {
    background-position : 0 -145px;
}
.lv13 {
    background-position : 0 -157px;
}
.lv14 {
    background-position : 0 -169px;
}
.lv15 {
    background-position : 0 -181px;
}
.lv16 {
    background-position : 0 -193px;
}
.lv17 {
    background-position : 0 -205px;
}
.lv18 {
    background-position : 0 -217px;
}
.lv19 {
    background-position : 0 -229px;
}
.lv20 {
    background-position : 0 -241px;
}

显示用户的等级的时候用的图片，用jQuery的时候，用addClass()和removeClass()的方法。
但我觉得直接用css()方法不是更简洁吗？
从效率的角度来说，用css()方法的效率是更低吗？

Answer 1

从代码可读性，以及可维护性来说，肯定是修改class比较好。
假如这张图片更新，要修改所有的sprites坐标，使用class的话只要修改这一段css就好。如果直接使用css()的话。你要搜索所有js来修改。如果用到的地方很多就会比较难维护。

Answer 2

我个人觉得都差不多，css与addclass只是class与行内样式的区别，不过你这个等级如何不考虑特效的话完全可以通过后端输出来改变

Answer 3

样式内容多，肯定是class靠谱啊…………

Answer 4

就说说它们的不同吧。

我是这么理解的，这种css()方法是js对css直接进行操作的，也就是你要定义的样式如果不存在也可以生效，相当于创建一个新的css样式。如果你在项目中用这个方法的话，要小心把别的样式覆盖掉了，这就不是简洁不简洁的问题了。

用*Class()方法，是借用html的class属性对css进行操作，如果这个样式不存在的话，是没办法生效的。

我感觉效率都差不多吧，反正修改css浏览器不都是重新渲染一次吗？坐等大神解答。

Answer 5

addclass

Answer 6

最大的优点是代码清晰明了容易维护！然后是写成类的样式，更倾向于模块化。尤其是在样式有很多的时候，模块化的写法更利于浏览器对dom 节点的渲染！