首页 > 代码库 > jQuery操作样式知识总结
jQuery操作样式知识总结
css操作
功能:设置或者修改样式,操作的是style属性。
设置单个样式
//name:需要设置的样式名称//value:对应的样式值css(name, value);//使用案例$("#one").css("background","gray");//将背景色修改为灰色
设置多个样式
//参数是一个对象,对象中包含了需要设置的样式名和样式值 css(obj);//使用案例$("#one").css({ "background":"gray", "width":"400px", "height":"200px"});
获取样式
//name:需要获取的样式名称css(name);//案例$("div").css("background-color");
注意:获取样式操作只会返回第一个元素对应的样式值。
添加样式类
//name:需要添加的样式类名,注意参数不要带点.addClass(name);//例子,给所有的div添加one的样式。$("div").addClass("one");
移除所有样式类
//不带参数,移除所有的样式类removeClass()//例子,移除div所有的样式类$("div").removeClass();
移除单个样式类
//name:需要移除的样式类名removeClass("name");//例子,移除div中one的样式类名$("div").removeClass("one");
判断是否有样式类
//name:用于判断的样式类名,返回值为true falsehasClass(name)//例子,判断第一个div是否有one的样式类$("div").hasClass("one");
切换样式类
//name:需要切换的样式类名,如果有,移除该样式,如果没有,添加该样式。toggleClass(name);//例子$("div").toggleClass("one");
经验总结:
- 如果操作到的样式非常少,可以考虑css方法
- 如果操作到的样式非常多,那么可以通过class方法来操作,将样式写到一个class类里面。
- 如果考虑到后期维护方便,将css从js中分离出来,那么推荐使用class的方式来操作。
jQuery操作样式知识总结
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。