`
netxdiy
  • 浏览: 711924 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

javascript使li元素隔行变色代码。兼容性好。

 
阅读更多
<style type="text/css">
<!--
.li01 { background:#FFF; }
.li02 { background:#eeeeee; }
-->
</style>
<div ><ul id="list01"><li class="title"><a href="#">title</a></li><li><a href="#">111</a></li><li><a href="#">222</a></li><li><a href="#">333</a></li><li><a href="#">444</a></li><li><a href="#">555</a></li><li><a href="#">666</a></li></ul></div>
<script Language="Javascript">
objName=document.getElementById("list01").childNodes;
for (i=0;i<objName.length;i++) {
(i%2==0)?(objName[i].className = "li01"):(objName[i].className = "li02");
}
</script>
分享到:
评论

相关推荐

    jquery选取商品隔行变色

    在网页设计中,为了提升用户体验和视觉效果,我们经常需要对数据列表进行美化处理,比如隔行变色。"jQuery选取商品隔行变色"是一个常见的网页交互功能,主要用于电商网站的商品列表展示,使得用户在浏览长列表时能更...

    网页里面表格隔行变色代码

    在网页设计中,为了提升数据可读性和美观性,经常需要对表格进行隔行变色的处理。这种技术主要是通过CSS(层叠样式表)来实现的,使得表格的每一行交替显示不同的背景颜色,从而形成视觉上的区分。在本案例中,"网页...

    CSS结合JavaScript 实现Li隔行换色 代码

    ### CSS结合JavaScript 实现Li隔行换色代码详解 #### 一、背景介绍 在网页设计与开发过程中,为了提高用户体验以及美观性,开发者经常需要对列表项进行样式处理,如实现列表项的隔行变色功能。这种功能不仅能够使...

    实现表格的隔行变色

    在网页设计中,为了提升数据展示的可读性和美观性,常常会采用隔行变色的技巧来对表格进行美化。隔行变色使得用户在查看大量数据时能更容易地区分每一行,从而减轻视觉疲劳,提高阅读效率。本文将详细讲解如何实现...

    表格隔行变色

    通过以上技术的结合,我们可以创建一个具有隔行变色和鼠标悬停高亮效果的动态时间表格,使用户在查看和交互时有更好的体验。在实际项目中,还要考虑到性能优化、兼容性问题以及可能的用户自定义需求。

    JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】

    ### JavaScript表格隔行变色 #### 知识点1:JavaScript表格隔行变色基本原理 JavaScript表格隔行变色是一种常见的前端视觉效果,通过为表格中的行设置不同的背景颜色,使得用户浏览时能够更加容易地分辨不同的行。...

    JavaScript实现99乘法表及隔行变色实例代码

    JavaScript实现99乘法表及隔行变色实例代码的知识点涉及到了HTML基础、JavaScript编程基础以及CSS样式应用。以下将详细介绍这些知识点: 1. HTML和JavaScript的结合使用: 本文的项目要求是在页面中输出99乘法表,...

    Table隔行变色的JavaScript代码

    1. 表格隔行变色实现原理:利用JavaScript的DOM操作,通过获取表格中的每一行元素(tr),利用数组的遍历和模运算来判断当前行是奇数行还是偶数行。然后,根据行的索引位置为行元素添加不同的背景颜色样式(style....

    JavaScript应用实例-list隔行变色.js

    JavaScript应用实例-list隔行变色.js

    js隔行变色、鼠标划过变色代码.docx

    根据给定文件的信息,本文将详细介绍如何利用JavaScript实现表格或列表项的隔行变色以及鼠标划过时的颜色变化效果。 ### 一、基础知识简介 #### 1. CSS选择器 CSS选择器用于选取HTML文档中的元素。在本例中,我们...

    javascript实现table表格隔行变色的方法

    总结起来,JavaScript实现表格隔行变色的关键在于使用`document.getElementById`和`getElementsByTagName`来选取需要操作的元素,以及使用循环和条件语句来动态地改变元素的样式。这种方法可以很好地提升表格的视觉...

    JavaScript dom操作 删除元素 示例代码

    JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 ...

    javascript表格隔行变色加鼠标移入移出及点击效果的方法.docx

    ### JavaScript表格隔行变色及鼠标交互效果实现 在网页设计与开发中,为了提升用户体验,经常需要对表格中的数据进行美化处理。其中一项常用的技术就是实现表格的隔行变色以及鼠标移入移出、点击等交互效果。本文将...

    jquery表格隔行变色鼠标滑过竖直表格内容变色效果

    在实际应用中,你可能还需要考虑兼容性和性能优化,例如使用类名切换而非直接修改CSS属性,或者使用更高效的事件委托。同时,确保在你的HTML代码中正确引用了jQuery库,例如通过CDN链接或本地文件引用。 总结一下,...

    JavaScript dom操作 dom元素查询 示例代码

    JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码...

    隔行颜色不同、隔行颜色不同

    在CSS中,我们可以选择性地应用样式到特定的行或元素。例如,对于一个HTML表格`&lt;table&gt;`,我们可以使用`:nth-child()`伪类选择器来为偶数行和奇数行设置不同的背景颜色。以下是一个基本示例: ```css table tr:nth-...

    原生JS操作网页给p元素添加onclick事件及表格隔行变色

    原生JavaScript(简称原生JS)是一种不需要任何外部库...通过具体的示例代码,展示了如何给p元素添加onclick事件以及如何给表格实现隔行变色。这对于学习和深入理解JavaScript在Web开发中的作用具有很好的参考价值。

    javascript表格隔行变色加鼠标移入移出及点击效果的方法

    本文将详细解析如何利用JavaScript实现表格隔行变色、鼠标移入移出以及点击效果,帮助开发者为用户提供更加直观、友好的界面。 首先,表格隔行变色是一种常见的视觉技巧,它通过改变奇偶行的颜色差异来防止用户在...

Global site tag (gtag.js) - Google Analytics