快捷導(dǎo)航

jquery設(shè)置css樣式的多種方法(總結(jié))

更新時(shí)間：2017年02月21日 09:24:07 投稿：jingxian

下面小編就為大家?guī)?lái)一篇jquery設(shè)置css樣式的多種方法(總結(jié))。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

設(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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

淺析ajax請(qǐng)求json數(shù)據(jù)并用js解析(示例分析)
這應(yīng)該是每個(gè)web開(kāi)發(fā)的人員都應(yīng)該掌握的基礎(chǔ)技術(shù)，需要的朋友可以參考下
2013-07-07
jQuery實(shí)現(xiàn)的分頁(yè)功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的分頁(yè)功能,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery實(shí)現(xiàn)分頁(yè)功能的具體步驟及相關(guān)操作技巧,包括前臺(tái)樣式、布局及jQuery分頁(yè)插件的調(diào)用方法,需要的朋友可以參考下
2017-01-01
這篇文章主要介紹了jquery實(shí)現(xiàn)簡(jiǎn)單實(shí)用的打分程序,涉及jquery節(jié)點(diǎn)遍歷與樣式操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-07-07

jquery中animate的stop()方法作用實(shí)例分析

這篇文章主要介紹了jquery中animate的stop()方法作用,實(shí)例分析了animate的stop()方法在視頻播放代碼中的使用技巧,感興趣的朋友可以對(duì)比分析一下帶stop方法與不帶stop方法運(yùn)行效果的區(qū)別,需要的朋友可以參考下

2015-01-01

jquery Easyui Datagrid實(shí)現(xiàn)批量操作（編輯，刪除，添加）

本篇文章主要介紹了jquery Easyui Datagrid實(shí)現(xiàn)批量操作（編輯，刪除，添加），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

2017-02-02

Jquery屬性的獲取/設(shè)置及樣式添加/刪除操作技巧分析

這篇文章主要介紹了Jquery屬性的獲取/設(shè)置及樣式添加/刪除操作技巧,結(jié)合實(shí)例形式分析了jquery針對(duì)屬性與樣式的相關(guān)獲取、設(shè)置、添加、刪除等相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下

2019-12-12

jQuery實(shí)現(xiàn)每隔一段時(shí)間自動(dòng)更換樣式的方法分析

這篇文章主要介紹了jQuery實(shí)現(xiàn)每隔一段時(shí)間自動(dòng)更換樣式的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery結(jié)合時(shí)間函數(shù)動(dòng)態(tài)修改頁(yè)面元素屬性相關(guān)操作技巧,需要的朋友可以參考下

2018-05-05