利用JavaScript的%做隔行換色的實例

更新時間：2017年11月25日 08:40:41 投稿：jingxian

下面小編就為大家分享一篇利用JavaScript的%做隔行換色的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

如下所示：

<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
<style type="text/css">
 li {
  list-style-type: none;
  width: 300px;
  height: 30px;
 }
</style>
</head>

<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script type="text/javascript">
 var oli=document.getElementsByTagName('li');
 for(var i=0;i<oli.length;i++)
  {
   if(i%2==0)
    {
     oli[i].style.background='#F17B7D';
    }
   else
    {
     oli[i].style.background='#EDB461';
    }
  }
</script>
</body>
</html>

以上這篇利用JavaScript的%做隔行換色的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Js鼠標(biāo)跟隨代碼小手點(diǎn)擊實例方法
一個跟隨鼠標(biāo)的小手效果，鼠標(biāo)移在哪里，小手就跟著移向哪里，會出現(xiàn)手的效果，放在鏈接上的時候，手會變化，兩只手很可愛哦，JS鼠標(biāo)跟隨代碼分享與大家。
2013-05-05
JS創(chuàng)建對象的十種方式總結(jié)
面向?qū)ο笫且环N重要的編程范式,如何靈活的創(chuàng)建對象,是對編程基本功的考驗,本來我們來探討一下JavaScript中創(chuàng)建對象的十種方式,感興趣的小伙伴可以了解下
2023-10-10
JavaScript 事件入門知識
這篇文章主要介紹了JavaScript 事件入門知識,需要的朋友可以參考下
2015-04-04
前端實現(xiàn)PDF文件預(yù)覽的7種方案與性能對比詳解
這篇文章主要為大家詳細(xì)介紹了前端實現(xiàn)PDF文件預(yù)覽的7種方案與性能對比,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2025-03-03
使用JavaScript執(zhí)行表單驗證的方法
在Web前端開發(fā)中,表單驗證是一個常見的任務(wù),用于確保用戶輸入的數(shù)據(jù)符合預(yù)期的要求,通過使用JavaScript,可以實現(xiàn)強(qiáng)大的表單驗證功能,提升用戶體驗和數(shù)據(jù)的可靠性,本文將詳細(xì)介紹如何使用JavaScript執(zhí)行表單驗證,包括基本概念、作用說明、實現(xiàn)方法和實際開發(fā)中的使用技巧
2024-11-11
Bootstrap學(xué)習(xí)筆記輪播（Carousel）插件
Bootstrap 輪播（Carousel）插件是一種靈活的響應(yīng)式的向站點(diǎn)添加滑塊的方式。這篇文章主要介紹了Bootstrap學(xué)習(xí)筆記輪播（Carousel）插件,需要的朋友可以參考下
2017-03-03
js中toString()與valueOf()的使用
tostring 和 valueOf 函數(shù)是解決值的顯示和運(yùn)算的問題，本文主要介紹了js中toString()與valueOf()的使用，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-06-06
詳解webpack 如何集成第三方j(luò)s庫
這篇文章主要介紹了詳解webpack 如何集成第三方j(luò)s庫，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
詳解webpack require.ensure與require AMD的區(qū)別
本篇文章主要介紹了詳解webpack require.ensure與require AMD的區(qū)別，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-12-12
js實現(xiàn)異步循環(huán)實現(xiàn)代碼
這篇文章主要介紹了js實現(xiàn)異步循環(huán)實現(xiàn)代碼,需要的朋友可以參考下
2016-02-02