jquery設(shè)置css樣式的多種方法(總結(jié))
設(shè)置css樣式的多種方法總結(jié),jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<body>
<ul>
<li>兄弟多個(gè)1</li>
<li>兄弟多個(gè)2</li>
<li>兄弟多個(gè)3</li>
<li>兄弟多個(gè)4</li>
<li>兄弟多個(gè)5</li>
<li>兄弟多個(gè)6</li>
<li>兄弟多個(gè)7</li>
<li>兄弟多個(gè)8</li>
<li>兄弟多個(gè)9</li>
</ul>
<ul id="ul">
<li>兄弟多個(gè)1</li>
<li>兄弟多個(gè)2</li>
<li>兄弟多個(gè)3</li>
<li>兄弟多個(gè)4</li>
<li>兄弟多個(gè)5</li>
<li>兄弟多個(gè)6</li>
<li>兄弟多個(gè)7</li>
<li>兄弟多個(gè)8</li>
<li>兄弟多個(gè)9</li>
</ul>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script>
//設(shè)置css屬性
$("ul").css("backgroundColor","red");
//同時(shí)設(shè)置多值
$("ul").css({
backgroundColor: "yellow",
fontSize: "16px"
});
//間隔顯示不一樣的顏色
$("#ul li").css("color",function(index,value){
console.log(index); //當(dāng)前元素的序號(hào)
console.log(value); //當(dāng)前元素要設(shè)置的樣式的值
if(index%2==0){
return "red";
}else{
return "blue";
}
});
</script>
</body>
</html>
以上這篇jquery設(shè)置css樣式的多種方法(總結(jié))就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- jQuery獲取樣式中的背景顏色屬性值/顏色值
- 如何使用jquery修改css中帶有!important的樣式屬性
- 從零開始學(xué)習(xí)jQuery (四) jQuery中操作元素的屬性與樣式
- jQuery修改class屬性和CSS樣式整理
- 基于jquery animate操作css樣式屬性小結(jié)
- jQuery 添加樣式屬性的優(yōu)先級(jí)別方法(推薦)
- jQuery操作屬性和樣式詳解
- jQuery使用CSS()方法給指定元素同時(shí)設(shè)置多個(gè)樣式
- JQuery實(shí)現(xiàn)樣式設(shè)置、追加、移除與切換的方法
- jQuery實(shí)現(xiàn)為L(zhǎng)I列表前3行設(shè)置樣式的方法【2種方法】
- jQuery常用樣式操作實(shí)例分析(獲取、設(shè)置、追加、刪除、判斷等)
- JQuery樣式與屬性設(shè)置方法分析
相關(guān)文章
基于jQuery的實(shí)現(xiàn)簡(jiǎn)單的分頁(yè)控件
分頁(yè)控件需要向后臺(tái)發(fā)送請(qǐng)求,發(fā)送的參數(shù)包括當(dāng)前頁(yè),每頁(yè)顯示數(shù)量,查詢條件;并且獲取數(shù)據(jù)加載到當(dāng)前頁(yè)面2010-10-10
jQuery Ajax Post 回調(diào)函數(shù)不執(zhí)行問題的解決方法
本文是小編給大家?guī)淼膉Query Ajax Post 回調(diào)函數(shù)不執(zhí)行的原因及解決方法,在本文最下面還給大家附加jquery Ajax 不執(zhí)行回調(diào)函數(shù)success的原因,這兩個(gè)問題都非常多見,感興趣的朋友一起看下吧2016-08-08
JQuery 構(gòu)建客戶/服務(wù)分離的鏈接模型中Table分頁(yè)代碼效率初探
JQuery構(gòu)建客戶/服務(wù)分離的鏈接模型中Table分頁(yè)代碼效率初探!2010-01-01
jQuery簡(jiǎn)單實(shí)現(xiàn)仿京東商城的左側(cè)菜單效果代碼
這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)仿京東商城的左側(cè)菜單效果代碼,通過簡(jiǎn)單的jQuery鼠標(biāo)事件及元素動(dòng)態(tài)變換實(shí)現(xiàn)樣式動(dòng)態(tài)切換功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-09-09
jQuery初識(shí)之設(shè)計(jì)思想方法函數(shù)示例
這篇文章主要為大家介紹了jQuery初識(shí)之設(shè)計(jì)思想及方法函數(shù)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-06-06
jQuery Autocomplete自動(dòng)完成插件
jQuery Autocomplete plugin 寫的比較滿意,拿出來分享,歡迎大家找BUG。2010-07-07
jQuery實(shí)現(xiàn)手風(fēng)琴效果(蒙版)
這篇文章主要介紹了jQuery實(shí)現(xiàn)手風(fēng)琴效果,附帶蒙版特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-01-01
jQuery 動(dòng)態(tài)酷效果實(shí)現(xiàn)總結(jié)
jQuery是一個(gè)優(yōu)秀的JavaScript框架,可以很好的解決不同瀏覽器兼容的問題,尤其是在ASP.NET MVC下,它的作用更加的凸顯。2009-12-12

