jQuery操作样式知识总结

Posted 萧诺

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 false
hasClass(name)
//例子,判断第一个div是否有one的样式类
$("div").hasClass("one");

 

切换样式类

 

//name:需要切换的样式类名,如果有,移除该样式,如果没有,添加该样式。
toggleClass(name);
//例子
$("div").toggleClass("one");

 

经验总结:

  1. 如果操作到的样式非常少,可以考虑css方法
  2. 如果操作到的样式非常多,那么可以通过class方法来操作,将样式写到一个class类里面。
  3. 如果考虑到后期维护方便,将css从js中分离出来,那么推荐使用class的方式来操作。

 

以上是关于jQuery操作样式知识总结的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript基础知识总结 16:dom基本操作

jQuery基础知识点(DOM操作)

jQuery基础知识点(DOM操作)

jQuery 样式操作文档操作属性操作的方法总结

线程学习知识点总结

Javascript知识jQuery样式操作&案例:jQuery隔行换色