利用JavaScript的%做隔行换色的实例
程序员文章站
2022-04-09 21:01:40
如下所示：
无标题文...</div>
<div class="content">
<p><span style="background-color: #ccffcc"><strong>如下所示：</strong></span></p>
<div class="jb51code">
<pre class="brush: javascript;">
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</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></pre>
</div>
<p>以上这篇利用javascript的%做隔行换色的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。</p> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/528704.html">
Vue.js实现分页查询功能 </a>
</p>
<p>
下一篇： <a href="/article/528706.html">
写给小白看的JavaScript异步 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2283157.html" target="_blank" title="CSS2实现的隔行换色">
<h2>
CSS2实现的隔行换色 </h2>
</a>
</li>
<li>
<a href="/article/2166908.html" target="_blank" title="jQuery实现table隔行换色和鼠标经过变色的两种方法">
<h2>
jQuery实现table隔行换色和鼠标经过变色的两种方法 </h2>
</a>
</li>
<li>
<a href="/article/2153571.html" target="_blank" title="使用简洁的jQuery方法实现隔行换色功能">
<h2>
使用简洁的jQuery方法实现隔行换色功能 </h2>
</a>
</li>
<li>
<a href="/article/2050949.html" target="_blank" title="使用javascript做时间倒数读秒功能的实例">
<h2>
使用javascript做时间倒数读秒功能的实例 </h2>
</a>
</li>
<li>
<a href="/article/2046501.html" target="_blank" title="JS案例四：表格的隔行换色以及高亮显示">
<h2>
JS案例四：表格的隔行换色以及高亮显示 </h2>
</a>
</li>
<li>
<a href="/article/2043190.html" target="_blank" title="Excel隔行换色避免看错行提高工作效率及公式的原理详解">
<h2>
Excel隔行换色避免看错行提高工作效率及公式的原理详解 </h2>
</a>
</li>
<li>
<a href="/article/1927284.html" target="_blank" title="使用JQ完成表格隔行换色的简单实例">
<h2>
使用JQ完成表格隔行换色的简单实例 </h2>
</a>
</li>
<li>
<a href="/article/1897989.html" target="_blank" title="jQuery方法简洁实现隔行换色及toggleClass的使用">
<h2>
jQuery方法简洁实现隔行换色及toggleClass的使用 </h2>
</a>
</li>
<li>
<a href="/article/1863387.html" target="_blank" title="不用javascript实现带序号的表格隔行换色的效果">
<h2>
不用javascript实现带序号的表格隔行换色的效果 </h2>
</a>
</li>
<li>
<a href="/article/1844911.html" target="_blank" title="使用jquery hover事件实现表格的隔行换色功能示例">
<h2>
使用jquery hover事件实现表格的隔行换色功能示例 </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>