javascript操作ul中li的方法

更新时间：2026-05-10 21:48:24作者：zhao

本文实例讲述了javascript操作ul中li的方法。分享给大家供大家参考。具体如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>动态控制li球队列表</title>

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>

<!--功能说明

1.鼠标滑过的行变为红色

2.点击行字体变大

-->

</ul>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

手游推荐