如何利用jquery中css和class方法进行样式操作
程序员文章站
2022-03-28 14:17:28
...
本篇文章给大家带来的内容是介绍有关jQuery操作样式以及改变样式的案例,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助
jQuery的操作样式
class操作
(1)判断是否有样式类 hasClass(name)//name:用于判断的样式类名,返回值为true false 判断div是否有demo的样式类 $(“div”).hasClass(“demo”) (2)添加样式类 addClass(name)//name指需要添加的样式类名,注意参数不要带点. //给div添加demo的样式。 $(“div”).addClass(“demo”); (3)移除样式类 removeClass("name")//name:需要移除的样式类名 //移除div中demo的样式 $(“div”).removeClass(“demo”);
css操作(操作的是style属性)
(1)获取样式 css(name)//name:需要获取的样式名称 //获取div的背景颜色属性 $("div").css("background-color"); 注意:获取样式操作只会返回第一个元素对应的样式值。 (2)设置单个样式 css(name,value)//name:需要设置的样式名称,value:对应的样式值 //给一个div标签的背景修改成红色 $("div").css("background","red"); (3)设置多个样式 css(obj)//参数是一个对象,对象中包含了需要设置的样式名和样式值 //例如 $("#one").css({ "background":"gray", "width":"400px", "height":"200px" });
案例分享:隔行变色
通过jQuery中的css操作和class操作来改变背景颜色的不同
<!DOCTYPE html> <html> <head><meta charset="UTF-8"></head> <body> <style> *{ padding: 0; margin:0; } ul{list-style: none; } li{ width:300px; height:30px; background-color:rgb(14,150,249); } .even{ background-color:rgb(241,70,215); } </style> <ul> <li>第一个</li> <li>第二个</li> <li>第三个</li> <li>第四个</li> <li>第五个</li> <li>第六个</li> </ul> <script src="jquery/jquery-1.12.4.js"></script> <script> $(function(){ //给奇数的li修改背景颜色 $("li:odd").css("backgroundColor","pink"); //给偶数的li添加even类 $("li:even").addClass('even'); }); </script> </body> </html>
效果图:
总结:以上就是本篇文章的内容了,希望对大家学习jQuery内容有所帮助。
以上就是如何利用jquery中css和class方法进行样式操作的详细内容,更多请关注其它相关文章!