JavaScript--DOM操作例子：隔行变色
上效果：
实现思想：
主要是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操作例子：隔行变色的更多相关文章
- javascript DOM 操作
在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...
- javascript DOM 操作 attribute 和 property 的区别
javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...
- javascript DOM操作之 querySelector,querySelectorAll
javascript DOM操作之 querySelector,querySelectorAll
- javascript DOM 操作基础知识小结
经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的. DOM添加元素,使用节点属性 <!DOCTYPE html PUBLIC ...
- Javascript操作表格隔行变色
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 表格的一些原生js操作（隔行变色，高亮显示，添加删除，搜索）
看着网上的视频教程,虽说还是有点简单,但还是不免想记录下.这些操作包括(隔行变色,高亮显示,添加删除,搜索功能),而这儿就是涉及table的原有属性“tBodies” “rows” “cells”等几 ...
- 仅100行的JavaScript DOM操作类库
如果你构建过Web引用程序,你可能处理过很多DOM操作.访问和操作DOM元素几乎是每一个Web应用程序的通用需求.我们我们经常从不同的控件收集信息,我们需要设置value值,修改div或span标签的 ...
- javascript DOM操作HTML文档
文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...
- SVG基础以及使用Javascript DOM操作SVG
SVG 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序(比如谷歌地图) 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 不适合游戏应用 Canvas 依赖分辨率 不支持事 ...
- Javascript DOM操作实例
最近在学DOM,但是还是没有办法很好的记住API,想找些例子来练习,网上的例子将一个个DOM对象方法挨个举例,并没有集合在一起用,效果不尽人意.所以自己写一份实例,顺便巩固下学到的知识. ...
随机推荐
- httpclient遇到java.net.URISyntaxException: Illegal character in scheme name at index 0:
正准备按照大佬的解决办法处理, 看会一条回复,说url有空格 检查了一下,还真是有空格 去除url中的空格,问题解除
- springmvc 串口读写 基于win7使用txrx netbeans jdk1.8 maven的
引入 <dependency> <groupId>org.rxtx</groupId> <artifactId>rxtx</artifactId& ...
- Django--Cookie和Session组件
什么是Cookie: cookie的工作原理是:由服务端产生内容,浏览器收到请求之后保存在本地:当浏览器再次访问的时候,浏览器会自动带上这个cookie,这样服务端就能去通过这个cookie来判断你是 ...
- 2019.10.28 csp-s模拟测试91 反思总结
有一场没一场的233 T1: 胡乱分析一下题意,发现和为n的x个正整数,不同的数字种类不会超过√n个.假设这x个数字都不同,最多也就是(x+1)*x/2=n. 所以可以维护现有的size值以及对应的数 ...
- 跟我一起做一个vue的小项目（四）
接下来我们进行的是轮播页面下面的导航页的开发 我们需要的是实现轮播页下面的图标,并且实现轮播效果 这个话,其实基本思路先是渲染出小图标,然后,我们要对页数进行判断,如果图标的个数展示的就是8个,那个这 ...
- Django项目：CRM(客户关系管理系统)--20--12PerfectCRM实现King_admin分页上下页
{#table_data_list.html#} {## ————————08PerfectCRM实现King_admin显示注册表的字段表头————————#} {% extends 'king_m ...
- sublime中用less实现css预编译
实现css预编译的方式有很多,听说glup很流行而且功能也很强大,但是就目前的工作而言,仅要css预编译和YUIcompress就够了,接下来切入正题 Less 是一门 CSS 预处理语言,它扩展了 ...
- C++ string(STL)
发现字符串问题中 string 好厉害- string类的构造函数: string(const char *s); //用c字符串s初始化 string(int n,char c); //用n个字符c ...
- Java review-basic6
1. Weak references: In computer programming, a weak reference is a reference that does not protect t ...
- 文件上传之Java篇
最近做了一个下载文档的功能,于是联想到了上传功能,于是自己研究了一下后台语言是java的情况下怎样实现将文件上传到指定的目录,以下是项目的语言: 1.后台用jfinal框架 2.前台用jquery提交 ...