脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript操作ul中li

javascript操作ul中li的方法

 更新时间：2015年05月14日 09:47:52   作者：永远爱好写程序  
这篇文章主要介绍了javascript操作ul中li的方法,可实现鼠标经过li标签项对应改变背景色的功能,涉及javascript鼠标事件及页面元素属性的相关操作技巧,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 基于js实现的图片拖拽排序源码实例

    基于js实现的图片拖拽排序源码实例

    这篇文章主要给大家介绍了关于如何基于js实现的图片拖拽排序的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • Bootstrap基本组件学习笔记之列表组(11)

    Bootstrap基本组件学习笔记之列表组(11)

    这篇文章主要为大家详细介绍了Bootstrap基本组件学习笔记之列表组,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • BootStrap创建响应式导航条实例代码

    BootStrap创建响应式导航条实例代码

    这篇文章主要介绍了BootStrap创建响应式导航条实例代码的相关资料,需要的朋友可以参考下
    2016-05-05
  • 利用ES6的Promise.all实现至少请求多长时间的实例

    利用ES6的Promise.all实现至少请求多长时间的实例

    下面小编就为大家带来一篇利用ES6的Promise.all实现至少请求多长时间的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • JavaScript 继承的实现

    JavaScript 继承的实现

    正因为JavaScript本身没有完整的类和继承的实现，并且我们也看到通过手工实现的方式存在很多问题， 因此对于这个富有挑战性的任务网上已经有很多实现了
    2009-07-07
  • 详谈javascript中DOM的基本属性

    详谈javascript中DOM的基本属性

    DOM节点是一个对象，它有着一些属性。其中有些是只读的，有些可以直接进行更改（updated on-the-fly）。今天我们就来具体探讨下DOM的基本属性，希望对大家能有所帮助
    2015-02-02
  • JS一次前端面试经历记录

    JS一次前端面试经历记录

    这篇文章主要介绍了JS一次前端面试经历,结合具体案例形式分析了JS前端面试过程中遇到的问题以及响应的注意事项,需要的朋友可以参考下
    2020-03-03
  • 关于List.ToArray()方法的效率测试

    关于List.ToArray()方法的效率测试

    这篇文章主要介绍了关于List.ToArray()方法的效率测试的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-09-09
  • JavaScript中call、apply、bind实现原理详解

    JavaScript中call、apply、bind实现原理详解

    其实在很多文章都会写call，apply，bind,但个人觉着如果不弄懂原理,是很难理解透的,所以这篇文章主要介绍了JavaScript中call、apply、bind实现原理的相关资料,需要的朋友可以参考下
    2021-06-06
  • 如何在JavaScript中使用localStorage详情

    如何在JavaScript中使用localStorage详情

    这篇文章主要介绍了如何在JavaScript中使用localStorage，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02

最新评论