作品第一课----循环改变DIV颜色

最新推荐文章于 2024-09-11 15:33:18 发布

weixin_30815469

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量102

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/samtrybest/p/5071443.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    button { margin: 0 auto; display: block; }
    ul { overflow: hidden; margin: 3% 0 0 32%; }
    li { width: 100px; height: 100px; margin-right: 50px; background-color: #000; list-style: none; float: left;}
    

    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <button>点击循环改变颜色</button>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script type="text/javascript">
    $(document).ready(function(){
        $("button").on("click", function(){
            var num = $("li").length;
            for (var i = 0; i < num; i++) {
                $("li").eq(i).css("background-color", "red");
            };
        })
    })
    </script>
    
</body>
</html>