如何使用jquery中css与class办法进行样式设置

[摘要]本篇文章给大家带来的内容是介绍有关jQuery操作样式以及改变样式的案例，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助jQuery的操作样式class操作(1)判断是否有样式类 h...

本篇文章给大家带来的内容是介绍有关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”);

(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方法进行样式操作的详细内容，更多请关注php中文网其它相关文章！				
				
					微信
					分享
				

网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



  关键词：如何运用jquery中css与class办法进行样式设置