上效果：

实现思想：

主要是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. Python - 基本数据类型及其常用的方法之字典和布尔值

    字典 特点:{"key1": value1, "key2":value2}  , 键值对中的值可以为任何数据类型,键不能为列表.字典(无法哈希),布尔值可以为键 ...

  2. 2018-10-20-C#-从零开始写-SharpDx-应用-初始化dx修改颜色

    title author date CreateTime categories C# 从零开始写 SharpDx 应用 初始化dx修改颜色 lindexi 2018-10-20 17:34:37 +0 ...

  3. chgrp权限命令

    功能说明:变更文件或目录的所属群组. 语 法:chgrp [-cfhRv][--help][--version][所属群组][文件或目录...] 或 chgrp [-cfhRv][--help][-- ...

  4. Docker（二）安装及常用命令

    1.安装 1.安装虚拟机VMWare 链接:https://pan.baidu.com/s/1Xl7ENUm2gapPOFs-iXHpRQ 提取码:eubm 2.下载centos,我下的是这个版本的 ...

  5. 高斯消元和高斯约旦消元 Gauss（-Jordan） Elimination

    高斯消元法,是线性代数中的一个算法,可用来求解线性方程组,并可以求出矩阵的秩,以及求出可逆方阵的逆矩阵. 在讲算法前先介绍些概念 矩阵的初等变换 矩阵的初等变换又分为矩阵的初等行变换和矩阵的初等列变换 ...

  6. 技术人自己的KPI

    为什么需要技术KPI 在业务技术团队,有一个不好的趋势,就是团队越来越业务,越来越没有技术味道.每个人都在谈业务,技术大会上在谈业务,周会上在聊业务,周报里写的是业务项目......唯独少被谈及的是技 ...

  7. 八大 IoT 安全关键技术解析

    IoT 设备的增长也伴随着网络攻击的风险的增长,因此在设计产品时就必须考虑到系统的安全. 高德纳咨询公司最近的报告预测,到 2020 年,全世界将有 200.4 亿的物联网设备相互连接,且平均每天约还 ...

  8. LintCode_415 有效回文串

    给定一个字符串,判断其是否为一个回文串.只包含字母和数字,忽略大小写. 注意事项 你是否考虑过,字符串有可能是空字符串?这是面试过程中,面试官常常会问的问题. 在这个题目中,我们将空字符串判定为有效回 ...

  9. How To Install Nginx on CentOS 7（转）

    How To Install Nginx on CentOS 7 PostedJuly 22, 2014 427.4kviews NGINX CENTOS About Nginx Nginx is a ...

  10. Spring松耦合示例（转）& IOC

    Spring松耦合示例 轻松学习Spring<一> IoC容器和Dependency Injection模式 最近公司需要,项目中要用到Spring和Ibatis.趁着过年好好学习学习.I ...