この記事の例では、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 プログラミング設計に役立つことを願っています。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
