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 相关文章推荐
网页自动刷新,不产生嗒嗒声的一个解决方法
Mar 27 Javascript
一些javascript一些题目的解析
Dec 25 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
May 15 Javascript
深入分析js的冒泡事件
Dec 05 Javascript
javascript模拟C#格式化字符串
Aug 26 Javascript
layui前段框架日期控件使用方法详解
May 19 Javascript
javascript 中事件冒泡和事件捕获机制的详解
Sep 01 Javascript
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 Javascript
JavaScript实现的拼图算法分析
Feb 13 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
Jun 18 Javascript
JS实现简易贪吃蛇游戏
Aug 24 Javascript
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
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
将word转化为swf 如同百度文库般阅读实现思路及代码
2013/08/09 PHP
php简单实现快速排序的方法
2015/04/04 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
JavaScript中如何通过arguments对象实现对象的重载
2014/05/12 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
2015/09/18 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
2016/04/26 Javascript
mac下的nodejs环境安装的步骤
2017/05/24 NodeJs
jQuery自定义多选下拉框效果
2017/06/19 jQuery
vue服务端渲染缓存应用详解
2018/09/12 Javascript
JS事件绑定的常用方式实例总结
2019/03/02 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
python中函数默认值使用注意点详解
2016/06/01 Python
Python使用正则表达式实现文本替换的方法
2017/04/18 Python
关于Python数据结构中字典的心得
2017/12/04 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
python中单下划线(_)和双下划线(__)的特殊用法
2019/08/29 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
业务部门经理岗位职责
2014/02/23 职场文书
金融事务专业求职信
2014/04/25 职场文书
班主任自我评价范文
2015/03/11 职场文书
博士导师推荐信
2015/03/25 职场文书
2015年财务工作总结范文
2015/03/31 职场文书
中学生运动会广播稿
2015/08/19 职场文书
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
Go timer如何调度
2021/06/09 Golang
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS