上效果：

实现思想：

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

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.      <style>
  7.          /*奇数*/
  8.          ul li.odd {
  9.              background-color: #41ae9f;
  10.          }
  11.          /*偶数行*/
  12.          ul li.even {
  13.              background-color: #d5ff80;
  14.          }
  15.          ul li:hover {
  16.              background-color: #52ff18;
  17.          }
  18.  
  19.      </style>
  20.      <script>
  21.          window.onload = function () {
  22.              // 创建ul标签，并插入
  23.              var newUL = document.createElement("ul");
  24.              // 设置ul 的id 为ul
  25.              newUL.id = "list";
  26.  
  27.              // 创建li列表
  28.              var liArr = [];
  29.              for(var i = 0 ; i < 20 ; i++ ) {
  30.                  if(i%2 != 0 ) {
  31.                      // 奇数行
  32.                      liArr.push('<li class="odd">这是通过JS创建的第'+i+'个li</li>');
  33.                  }else {
  34.                      // 偶数行
  35.                      liArr.push('<li class="even">这是通过JS创建的第'+i+'个li</li>');
  36.                  }
  37.              }
  38.              console.log(liArr);
  39.              // 把liArr 插入到ul中-- 将liArr数组转换成字符串
  40.              newUL.innerHTML = liArr.join("");
  41.              // 插入ul
  42.              document.body.appendChild(newUL);
  43.          }
  44.      </script>
  45.  </head>
  46.  <body>
  47.  
  48.  </body>
  49.  </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实例5-表格打印

    编写一个名为printTable()的函数,它接受字符串的列表的列表,将它显示在组织良好的表格中,每列右对齐.假定所有内层列表都包含同样数目的字符串.例如,该值可能看起来像这样: table_data ...

  2. pycharm新手入门

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

  3. css3之弹性盒模型(Flex Box)

    CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时 ...

  4. JasperReport导出报表8

    我们已经看到在前面的章节中,如何打印和查看的JasperReport生成的文档.在这里,我们将看到如何在其他格式,如PDF,HTML和XLS转换或导出这些报告. Facade类net.sf.jaspe ...

  5. Java Iterator模式

    Iterator迭代器的定义:迭代器(Iterator)模式,又叫做游标(Cursor)模式.GOF给出的定义为:提供一种方法访问一个容器(container)对象中各个元素,而又不需暴露该对象的内部 ...

  6. 02Redis入门指南笔记(基本数据类型)

    一:热身 获得符合规则的健名列表:keys  pattern pattern支持glob风格的通配符,具体规则如下表: Redis命令不区分大小写.keys命令需要遍历Redis中的所有健,当键的数量 ...

  7. c++新特性实验(4)声明与定义:右值引用（C++11）

    1.作用 c++11以前,临时对象.字面常量一般情况下不可以再次访问,也不可以修改.右值引用可以解决这个问题. 1.1 实验A #include <iostream> using name ...

  8. Django项目：CRM(客户关系管理系统)--44--36PerfectCRM实现King_admin密码修改

    # king_urls.py # ————————02PerfectCRM创建ADMIN页面———————— from django.conf.urls import url from king_ad ...

  9. JS 生成二维码和加上logo图片

    参考链接:https://www.cnblogs.com/chiyi/p/5710324.html,http://www.jq22.com/jquery-info294 demo链接:demo查看 d ...

  10. Codeforces 463D

    题目链接 D. Gargari and Permutations time limit per test 2 seconds memory limit per test 256 megabytes i ...