javascript 操作ul中的li

最新推荐文章于 2021-06-03 14:32:07 发布

永远爱好写程序

最新推荐文章于 2021-06-03 14:32:07 发布

阅读量5.1k

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/limlimlim/article/details/8454274

版权

Javascript 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

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

永远爱好写程序

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
javascript 操作ul中的li

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> 动态控制li球队列表 function iniEvent() { var ul = document.getElementById("football
复制链接

扫一扫

专栏目录