cari

Rumah >hujung hadapan web >tutorial js >如何利用jquery中css和class方法进行样式操作

如何利用jquery中css和class方法进行样式操作

清浅
清浅asal
2018-11-13 14:48:452174semak imbas

本篇文章给大家带来的内容是介绍有关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(&#39;even&#39;);
});
</script>
</body>
</html>

效果图：

Image 9.jpg

总结：以上就是本篇文章的内容了，希望对大家学习jQuery内容有所帮助。


Atas ialah kandungan terperinci 如何利用jquery中css和class方法进行样式操作. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

jquery css class
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jQuery之深入学习Animate（三）Artikel seterusnya：浅谈Canvas能做什么?Canvas的使用

Artikel berkaitan

Lihat lagi