javascript操作ul中li的方法


Posted in Javascript onMay 14, 2015

本文实例讲述了javascript操作ul中li的方法。分享给大家供大家参考。具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态控制li球队列表</title>
<script type="text/javascript">
function iniEvent() {
 var ul = document.getElementById("football");
 var lis = ul.getElementsByTagName("li");
 for (var i = 0; i < lis.length; i++) {
  //鼠标经过事件
  lis[i].onmouseover = function () {
   var ul = document.getElementById("football");
   var lis = ul.getElementsByTagName("li");
   for (var i = 0; i < lis.length; i++) {
    var li = lis[i];
    if (li == this) {
     li.style.background = "red";
    }
    else {
     li.style.background = "gray";
    }
   }
  }
  //鼠标单击事件
  lis[i].onclick = function () {
   var ul = document.getElementById("football");
   var lis = ul.getElementsByTagName("li");
   for (var i = 0; i < lis.length; i++) {
    var li = lis[i];
    if (li == this) {
     li.style.fontSize = 30;
    }
    else {
     li.style.fontSize = 16;
    }
   }
  }
 }
}
</script>
</head>
<body onload="iniEvent()">
<!--功能说明
1.鼠标滑过的行变为红色
2.点击行字体变大
-->
<ul style="width:200px" id="football">
<li>皇马</li>
<li>曼联</li>
<li>切尔西</li>
<li>巴萨</li>
<li>Ac米兰</li>
<li>国际米兰</li>
</ul>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript 一个函数对同一元素的多个事件响应
Jul 25 Javascript
页面中iframe相互传值传参
Dec 13 Javascript
jQuery 方法大全方便学习参考
Feb 25 Javascript
jquery实现多级下拉菜单的实例代码
Oct 02 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
Sep 05 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 Javascript
React服务端渲染(总结)
Jul 01 Javascript
Angular2 自定义validators的实现方法
Jul 05 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
Mar 09 Javascript
基于js判断浏览器是否支持webGL
Apr 18 Javascript
javascript中createElement的两种创建方式
May 14 #Javascript
javascript常用方法总结
May 14 #Javascript
javascript实现动态改变层大小的方法
May 14 #Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
May 14 #Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
May 13 #Javascript
JS实现简洁、全兼容的拖动层实例
May 13 #Javascript
javascript实现图片跟随鼠标移动效果的方法
May 13 #Javascript
You might like
如何在WIN2K下安装PHP4.04
2006/10/09 PHP
记录mysql性能查询过程的使用方法
2013/05/02 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
如何使用PHP对网站验证码进行破解
2015/09/17 PHP
php简单处理XML数据的方法示例
2017/05/19 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
javascript操作字符串的原生方法
2014/12/22 Javascript
jQuery中innerHeight()方法用法实例
2015/01/19 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
2015/03/04 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
JS实现弹性菜单效果代码
2015/09/07 Javascript
如何实现JavaScript动态加载CSS和JS文件
2020/12/28 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
2018/01/09 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
js验证身份证号码记录的方法
2019/04/26 Javascript
[44:41]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
在Python的Flask框架中使用模版的入门教程
2015/04/20 Python
python实现发送邮件功能
2017/07/22 Python
Python 网络爬虫--关于简单的模拟登录实例讲解
2018/06/01 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
Python生成一个迭代器的实操方法
2019/06/18 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
广州某公司软件工程师面试题
2014/12/22 面试题
《和我们一样享受春天》教学反思
2014/02/07 职场文书
2014坚持党风廉政建设思想汇报
2014/09/18 职场文书
作文评语集锦
2014/12/25 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书
PHP解决高并发问题
2021/04/01 PHP
日本动漫十大公认神作:第五现已全网禁播,《死亡笔记》在榜
2022/03/18 日漫
python实现双向链表原理
2022/05/25 Python