利用jquery中css和class進(jìn)行樣式操作的案例

發(fā)布時間：2020-08-29 14:44:21 來源：億速云閱讀：208 作者：小新欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)利用jquery中css和class進(jìn)行樣式操作的案例，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

jQuery的操作樣式

class操作

(1)判斷是否有樣式類
hasClass(name)//name:用于判斷的樣式類名，返回值為true false
判斷div是否有demo的樣式類
$(“div”).hasClass(“demo”)
(2)添加樣式類
addClass(name)//name指需要添加的樣式類名，注意參數(shù)不要帶點(diǎn).
//給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");
注意：獲取樣式操作只會返回第一個元素對應(yīng)的樣式值。
(2)設(shè)置單個樣式
css(name,value)//name：需要設(shè)置的樣式名稱,value：對應(yīng)的樣式值
//給一個div標(biāo)簽的背景修改成紅色
$("div").css("background","red");
（3）設(shè)置多個樣式
css(obj)//參數(shù)是一個對象，對象中包含了需要設(shè)置的樣式名和樣式值
//例如
$("#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(){
//給奇數(shù)的li修改背景顏色
$("li:odd").css("backgroundColor","pink");
//給偶數(shù)的li添加even類
$("li:even").addClass('even');
});
</script>
</body>
</html>

效果圖：

關(guān)于利用jquery中css和class進(jìn)行樣式操作的案例就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

利用jquery中css和class進(jìn)行樣式操作的案例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽