上效果：

实现思想：

主要是js动态创建标签，还有动态结合css实现样式

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         /*奇数*/

         ul li.odd {

             background-color: #41ae9f;

         }

         /*偶数行*/

         ul li.even {

             background-color: #d5ff80;

         }

         ul li:hover {

             background-color: #52ff18;

         }

     </style>

     <script>

         window.onload = function () {

             // 创建ul标签，并插入

             var newUL = document.createElement("ul");

             // 设置ul 的id 为ul

             newUL.id = "list";

             // 创建li列表

             var liArr = [];

             for(var i = 0 ; i < 20 ; i++ ) {

                 if(i%2 != 0 ) {

                     // 奇数行

                     liArr.push('<li class="odd">这是通过JS创建的第'+i+'个li</li>');

                 }else {

                     // 偶数行

                     liArr.push('<li class="even">这是通过JS创建的第'+i+'个li</li>');

                 }

             }

             console.log(liArr);

             // 把liArr 插入到ul中-- 将liArr数组转换成字符串

             newUL.innerHTML = liArr.join("");

             // 插入ul

             document.body.appendChild(newUL);

         }

     </script>

 </head>

 <body>

 </body>

 </html>

JavaScript--DOM操作例子：隔行变色的更多相关文章

  1. javascript DOM 操作

    在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...

  2. javascript DOM 操作 attribute 和 property 的区别

    javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...

  3. javascript DOM操作之 querySelector,querySelectorAll

    javascript DOM操作之 querySelector,querySelectorAll

  4. javascript DOM 操作基础知识小结

    经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的.   DOM添加元素,使用节点属性  <!DOCTYPE html PUBLIC ...

  5. Javascript操作表格隔行变色

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  6. 表格的一些原生js操作（隔行变色，高亮显示，添加删除，搜索）

    看着网上的视频教程,虽说还是有点简单,但还是不免想记录下.这些操作包括(隔行变色,高亮显示,添加删除,搜索功能),而这儿就是涉及table的原有属性“tBodies” “rows” “cells”等几 ...

  7. 仅100行的JavaScript DOM操作类库

    如果你构建过Web引用程序,你可能处理过很多DOM操作.访问和操作DOM元素几乎是每一个Web应用程序的通用需求.我们我们经常从不同的控件收集信息,我们需要设置value值,修改div或span标签的 ...

  8. javascript DOM操作HTML文档

    文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...

  9. SVG基础以及使用Javascript DOM操作SVG

    SVG 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序(比如谷歌地图) 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 不适合游戏应用 Canvas 依赖分辨率 不支持事 ...

  10. Javascript DOM操作实例

          最近在学DOM,但是还是没有办法很好的记住API,想找些例子来练习,网上的例子将一个个DOM对象方法挨个举例,并没有集合在一起用,效果不尽人意.所以自己写一份实例,顺便巩固下学到的知识. ...

随机推荐

  1. RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景？

    RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景? RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景? - 知乎 https://www ...

  2. pycharm新手入门

    1.新建项目 2.配置 3.create 4.新建.py文件 5.可以愉快的敲代码啦

  3. 两天了。照着SVN的界面画的一个界面。

      可以选择显示哪些列. 界面上的东西,都简单,麻烦的是它的下层.下层全部用svn server的服务器自带的svn.exe来支持. 有些位置要启动svn.exe不止一次.所以参数的来回传递,来回组合 ...

  4. crm-ssh-列表显示(顾客列表,用户,联系人列表)

    客户列表 1 分析 2 书写步骤 1.封装PageBean 2.书写Action 3.书写Service 4.书写Dao 5.完成strutx以及spring的配置 6.书写前台list.jsp页面 ...

  5. 跟我一起做一个vue的小项目（七）

    先看下我们所做项目的效果 这些数据都是我们在data中定义的,不是从后端数据中请求的.那么 接下来我们使用axios渲染数据 npm install axios --save 每个组件里面的数据都不相 ...

  6. Redis源码解析：23sentinel(四)故障转移流程

    十:故障转移流程中的状态转换 当哨兵针对某个主节点进行故障转移时,该主节点的故障转移状态master->failover_state,要依次经历下面六个状态: SENTINEL_FAILOVER ...

  7. linux下定位文件

    参考:http://www.cnblogs.com/ccode/p/4033088.html: 在linux命令行模式下,经常会遇到定位文件的问题,这时候采用locate和find都是可以的,下面简述 ...

  8. TZ_13_微服务场景Eureka

    1.搭建Eureka的注册中心 1.1Eureka几个时间间隔配置详解 1 >客户端信息上报到eureka服务的时间周期,配置的值越小,上报越频繁,eureka服务器应用状态管理一致性越高 #客 ...

  9. Thinkphp 数据库配置参数

    mysql配置 'DB_USER' => array( 'DB_TYPE' => 'mysql', 'DB_HOST' => '127.0.0.1', 'DB_NAME' => ...

  10. git与github建立链接（将本次项目与网络GitHub同步） --转存笔记

    转载自:https://blog.csdn.net/qq_36529459/article/details/79047220 1.(先进入项目文件夹)通过命令 git init 把这个目录变成git可 ...