对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、由于各浏览器动态渲染机制的不同,可能会出现属性值与实际效果不一致的情况。