javascript 操作ul中的li

来源：互联网发布：刚买的域名风险网站编辑：程序博客网时间：2024/05/14 11:31

<!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>
    <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()">
    
    <ul style="width:200px" id="football">
        <li>皇马</li>
        <li>曼联</li>
        <li>切尔西</li>
        <li>巴萨</li>
        <li>Ac米兰</li>
        <li>国际米兰</li>
    </ul>
</body>
</html>