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创建类/对象的几种方式概述及实例
May 06 Javascript
Javascript优化技巧之短路表达式详细介绍
Mar 27 Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
Sep 24 Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 Javascript
解决Angular.Js与Django标签冲突的方案
Dec 20 Javascript
Vue.js如何优雅的进行form validation
Apr 07 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 Javascript
原生js代码能实现call和bind吗
Jul 31 Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 Javascript
vue keep-alive 动态删除组件缓存的例子
Nov 04 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
使用 php4 加速 web 传输
2006/10/09 PHP
基于PHP一些十分严重的缺陷详解
2013/06/03 PHP
js和php邮箱地址验证的实现方法
2014/01/09 PHP
PHP实现图片上传并压缩
2015/12/22 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
extjs 学习笔记(一) 一些基础知识
2009/10/13 Javascript
javascript使用onclick事件改变选中行的颜色
2013/12/30 Javascript
js中传递特殊字符(+,&amp;)的方法
2014/01/16 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
AngularJS路由实现页面跳转实例
2017/03/03 Javascript
vue watch自动检测数据变化实时渲染的方法
2018/01/16 Javascript
AngularJS 监听变量变化的实现方法
2018/10/09 Javascript
新手简单了解vue
2019/05/29 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
2019/09/16 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
2020/02/13 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
Python生成随机验证码的两种方法
2015/12/22 Python
python里使用正则表达式的组嵌套实例详解
2017/10/24 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
详解Python 切片语法
2019/06/10 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
selenium中get_cookies()和add_cookie()的用法详解
2020/01/06 Python
python中pop()函数的语法与实例
2020/12/01 Python
新员工入职感言
2014/02/01 职场文书
小学生元旦广播稿
2014/02/21 职场文书
同学会主持词
2014/03/18 职场文书
安全标兵事迹材料
2014/08/17 职场文书
优秀乡村医生先进事迹材料
2014/08/23 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
2015年乡镇纪检工作总结
2015/04/22 职场文书
初中数学课堂教学反思
2016/02/17 职场文书
2016年“我们的节日·清明节”活动总结
2016/04/01 职场文书
详解Java线程池是如何重复利用空闲线程的
2021/06/26 Java/Android
漫画「日和酱的要求是绝对的」第3卷封面公开
2022/03/21 日漫