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程序设计有所帮助。
相关文章
这篇文章主要为大家详细介绍了JavaScript实现form表单的多文件上传，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要为大家介绍了JS 可选链的三种形势及好处详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要介绍了JS添加或删除HTML dom元素的方法,结合实例形式分析了javascript针对HTML DOM元素节点的创建、追加、删除等相关操作技巧与注意事项,需要的朋友可以参考下2019-03-03
单个按钮在Web页面中的运用有时候并不能满足我们的业务需求，常常会看到将多个按钮组合在一起使用，比如富文本编辑器里的一组小图标按钮等。本文将详细介绍Bootstrap按钮组，感兴趣的朋友一起看看吧2017-07-07
这篇文章主要介绍了基于redis的小程序登录实现流程分析，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05
加载页面的时候,图片一直都是流量大头,针对图片的性能方法也挺多的比如base64、雪碧图等;懒加载也是其中一种,这篇文章主要给大家介绍了关于利用原生JS实现懒加载lazyLoad的三种方法,需要的朋友可以参考下2021-07-07
浏览器是客户端,客户端的操作服务器是监听不到的,所以可以用js来监听,js代码监听浏览器关闭或者刷新,这篇文章主要给大家介绍了关于JS监听浏览器关闭、刷新及切换标签页触发事件的相关资料,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了js实现同一页面多个不同运动效果的方法,涉及javascript同时实现多个效果的技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
JavaScript中push(),join() 函数 实例详解
本文通过实例给大家介绍了JavaScript中push(),join() 的知识，非常不错，具有参考借鉴价值,需要的朋友可以参考下2016-09-09
这篇文章主要给大家介绍了关于js中的深浅拷贝问题的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-05-05
最新评论