javascript操作ul中li的方法

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

赞 (0)

相关推荐

  • angular或者js怎么确定选中ul中的哪几个li

    angular或者js怎么确定选中ul中的哪几个li

    刚来新公司接到新的需求做一个知识库页面 红色的是单选 蓝色的是多选 这些都是需要传递到后台的 开始不知道如何解决 下班后在家想到一个很巧妙的办法 不多说上代码 箭头所指就是在li里写一个隐藏的radio标签,把后台需要的id字段绑定到这个隐藏的radio上选中的时候传这个选中的radio的value就行 以上这篇angular或者js怎么确定选中ul中的哪几个li就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • Jquery和JS获取ul中li标签的实现方法

    js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElementsByTagName("ul"); var itemss=items[2].getElementsByTagName("li");//获取第二个li标签 或 var div=document.getElementById('a'); var ul=div.childN

  • javascript操作ul中li的方法

    本文实例讲述了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"> &l

  • JavaScript获取ul中li个数的方法

    本文实例讲述了JavaScript获取ul中li个数的方法.分享给大家供大家参考,具体如下: 有这样一段HTML代码: <ul id="mycarousel"> <li><img src=01_MED.jpg height=80 width=100/></li> <li><img src=02_MED.jpg height=80 width=100/></li> <li><img sr

  • JavaScript操作 url 中 search 部分方法函数

    JavaScript操作 url 中 search 部分方法函数

    前言 首先,我们需要知道什么是 search , search 是 window.location 的一个属性.举个例子: 首先,我们这里有一个 url,是 http://www.a.com/list/2.html?page=2&color=4&size=3#pic. 我们访问访问这个地址,打开控制台,输入window.location,会得到如下图的结果 如上,我们要操作的就是上图中方框框出来的这个部分. 为什么要操作这个? 例如,我在第二页,需要跳转到第三页,就需要把上面的 page=

  • JavaScript使用ul中li标签实现删除效果

    JavaScript使用ul中li标签实现删除效果

    本文实例为大家分享了js使用ul中li标签实现删除效果的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> ul { list-style: none; } li { background-color: #ddd; margin-top: 2px; } li:

  • JavaScript实现Java中StringBuffer的方法

    本文实例讲述了JavaScript实现Java中StringBuffer的方法.分享给大家供大家参考.具体如下: Javascript StringBuffer类的实现是通过prototype构造一个StringBuffer类,代码如下: function StringBuffer() { this.__strings__ = new Array(); } StringBuffer.prototype.append = function(str) { this.__strings__.push(

  • 在JavaScript实例对象中改写原型方法详情

    目录 在JavaScript中,我们通常可以像下面的代码这样来简单地定义一个类: var sample = function() { // constructor code here } sample.prototype.func1 = function() { // func1 code here } sample.prototype.func2 = function() { // func2 code here } /* more sample prototype functions her

  • JS获取并操作iframe中元素的方法

    JS获取/设置iframe内对象元素.文档的几种方法 1.IE专用(通过frames索引形象定位): 复制代码 代码如下: document.frames[i].document.getElementById('元素的ID'); 2.IE专用(通过iframe名称形象定位): 复制代码 代码如下: document.frames['iframe的name'].document.getElementById('元素的ID'); 以上方法,不仅对iframe适用,对frameset里的frame也同

  • 简单了解JavaScript操作XPath的一些基本方法

    Xpath现在很少被我们使用,因为JSON现在很盛行.可是在XML做为数据交换格式的年代,Xpath在我们随机访问大的xml文档结构的时候扮演着非常重要的位置.也许大家现在很多没有注意到,DOM Level 3 XPath指定的接口已经被Firefox,Safari, Chrome, and Opera实现了.他们所实现的核心接口就是XPathEvaluator,它包含一些能够使用xpath表达式进行工作的方法,最主要的方法就是evaluate(),它能够接受五个参数1.xpath查询字符串2.

  • 正则表达式语法规则及在Javascript和C#中的使用方法

    一.正则表达式概念: 在计算机科学中,是指一个用来描述或者匹配一系列符合某个句法规则的字符串的单个字符串.在很多文本编辑器或其他工具里,正则表达式通常被用来检索和/或替换那些符合某个模式的文本内容.许多程序设计语言都支持利用正则表达式进行字符串操作. 二.正则表达式的使用: 正则表达式在ASP.NET中主要是用来对输入的内容进行验证,验证一般分为两种一种是客户端JS验证,另一种是服务器端验证 1.JS对输入内容验证 复制代码 代码如下: function check() {           

随机推荐