对class的操作

class的特点：样式可以叠加，class可以设置多个名称，并且用空格隔开

JS操作：

通过属性

ele.className=”class1 class2”可读可写

获取class列表，数组

ele.classList

通过attribute，字符串

ele.getAttribute(“class”); //获得的值class1 class2

ele.setAttribute(“class”,”class1 class2”);

jQuery操作

添加：

$(ele).addClass(“class1”);

$(ele).addClass(“class2”);

$(ele).attr(“class”,”class1 class2”);

删除：

$(ele).removeClass(“class1”);

$(ele).removeClass(“class2”);

$(ele).removeAttr(“class”);

切换有无：

$(ele).toggleClass(“class1”);

对style操作

style命名规则“name1-name2:value;”,比如“font-size:12px”

JS操作：

通过style属性(值必须是字符串)

sylte属性返回的是CSSStyleDeclaration表示一个CSS属性键值对的集合，所以不能作为常规属性操作，如下操作是不合法的：

ele.style = “font:12px;”

正确的操作如下：

ele.style.prop = value;

prop的命名规则“name1Name2”,比如

ele.style.fontSize = “12px”

获取生效的style文本（只读）

e.style.cssText

另一种操作

e.style.getProperty(“name1-name2”);

e.style.setProperty(“name1-name2”,”value”,”important”);

(第三个参数是优先级，可选)

e.style.removeProperty(name);

通过attribute操作(字符串)，不推荐

ele.getAttribute(“style”);

ele.setAttribute(“style”,”prop1:val01;prop2:val02;”);

jQuery操作

css方法

两种调用方式：

取值$(ele).css(“name1-name2”)

设置值$(ele).css(“name1-name2”,”value”)

$.css(ele,name)

$.css(ele,name,value)

attr方法（不推荐）

$(ele).attr(“style”)

$(ele).attr(“style”,”prop1:val01;prop2:val02;”)

$(ele).removeAttr(“style”)

总结

通过操作attribute来改变样式，是最简单粗暴的方式，不推荐使用有如下几个原因：

1、先改变标签中style的值，然后浏览器再进行解析，才能生效，效率既不高也不靠谱。

2、对于多个样式删改，需要重新拼接字符串，不方便，并且每次生效要把所有样式重新渲染。

3、由于各浏览器动态渲染机制的不同，可能会出现属性值与实际效果不一致的情况。