编程 Javascript

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程序设计有所帮助。

- Author -

永远爱好写程序

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js post方式传递提交的实现代码

May 31 Javascript

Extjs改变树节点的勾选状态点击按钮将复选框去掉

Nov 14 Javascript

Node.js中的事件驱动编程详解

Aug 16 Javascript

js和jquery中循环的退出和继续学习记录

Sep 06 Javascript

JavaScript如何调试有哪些建议和技巧附五款有用的调试工具

Oct 28 Javascript

angularjs指令之绑定策略（@、=、&）

Apr 13 Javascript

基于JQuery的Ajax方法使用详解

Aug 16 jQuery

JS+WCF实现进度条实时监测数据加载量的方法详解

Dec 19 Javascript

vue-cli 如何打包上线的方法示例

May 08 Javascript

微信小程序scroll-view仿拼多多横向滑动滚动条

Apr 21 Javascript

使用mixins实现elementUI表单全局验证的解决方法

Apr 02 Javascript

vue 动态表单开发方法案例详解

Dec 02 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