javascript_22_for_js控制div每五个换一行-优快云博客

本文介绍如何使用CSS设置元素样式并利用JavaScript动态生成HTML元素实现特定布局效果。通过循环生成div元素，并通过JavaScript控制这些元素的位置，形成网格布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2.

3.














css:
    <style type="text/css">
        div{height: 50px;
            width: 50px;
            background: #f11614;
            line-height: 50px;
            color: #ffffff;
            text-align: center;
            font-size: 30px;
            position: absolute;}
    </style>

js:


    <script type="text/javascript">

        window.onload=function(){
            var aDiv=document.getElementsByTagName("div");
            for(var i=0,n=0;i<100;i++){
                document.body.innerHTML+="<div>"+i+"</div>";
                aDiv[i].style.left=(i%5)*60+"px";  //这里取模 就是取余数  能被5整除  余数当然是0啦  so  div 就 被文本流xxoo了 又回到了生活的起点;
                                                  //                aDiv[i].style.left=i*60+"px";去掉之后  图2
                aDiv[i].style.top=n*60+'px';
                if((i+1)%5==0){
                    n++;
                }                                //这里    i+1   因为0除以任何不是0的数都得0 所以第一个就执行了换行影响了第二个 div  就像图3
            }

        }
    </script>

两个声明用逗号隔开声明了一个第二个就不用加var
例子 var a=0,b=0;

i%5==0的意思判断i除以5以后的余数是否等于0，如果余数等于0返回真，不等于0返回假

if((i+1)%5==0){
n++;
}
不加一就执行了

不加一就执行了

从0开始 第四个 开始执行 +1 就是五 正好执行n++

7%5=2 6%5=1 5%5=0


7%5=2 6%5=1 5%5=0

转载于:https://www.cnblogs.com/aix1314/p/3808800.html