js的for循环改变样式结构

先放出代码

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title></title>
<script>
    window.onload = function(){
        var body = document.getElementsByTagName('body')[0];
        var btn = body.getElementsByTagName('button');
        for(var num = 0;num < 40;num++){
        body.innerHTML += "<button>" + "按钮" +"</button>";
    }
        for(var num = 0;num < 20;num++){
        //btn[num].style.marginLeft = "15px";
        btn[num].style.position = "absolute";
        btn[num].style.top = num*30 + "px";
        btn[num].style.left = num*30 + "px";
        }

        for(var num = 20;num < 40;num++){
        //btn[num].style.marginLeft = "15px";
        btn[num].style.position = "absolute";
        btn[num].style.top = num*30 + "px";
        btn[num].style.left = num*30 + "px";
        }
    };
</script>

</head>
<body>

</body>
</html>

希望按钮从num=21开始不断上升,然后与之前的按钮形成一个V字

function _SetCSSStyleValue(css,clsname,style,value){
        var i;
        var rules;
        if (css.rules) rules = css.rules;
        else rules = css.cssRules;
        for (i = 0; i < rules.length; i++){
            if (rules[i].selectorText === "." + clsname){
                var s = "rules[" + i + "].style." + style + " = \"" + value + "\"";
                eval(s);
                break;
            }
        }
    }

代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <title></title>
     </head>
     <body>

     </body>
</html>
<script>
    window.onload = function(){
        var body = document.getElementsByTagName('body')[0];
        var btn = body.getElementsByTagName('button');
        for(var num = 0;num < 40;num++){
        body.innerHTML += "<button>" + "按钮" + num + "</button>";
    }
        for(var num = 0;num <= 20;num++){
            //btn[num].style.marginLeft = "15px";
            btn[num].style.position = "absolute";
            btn[num].style.top = num*30 + "px";
            btn[num].style.left = num*30 + "px";
        }

        for(var num = 21;num < 40;num++){
            //btn[num].style.marginLeft = "15px";
            btn[num].style.position = "absolute";
            btn[num].style.top = btn[40-num].style.top;
            btn[num].style.left = num*30 + "px";
        }
    };
</script>

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function(){
            var body = document.getElementsByTagName('body')[0];
            var btn = body.getElementsByTagName('button');

            var totalButtongLength=11;
            for(var num = 0;num < totalButtongLength;num++){
                body.innerHTML += "<button>" + "按钮" +num+"</button>";
            }
            var half=parseInt(totalButtongLength/2);
            var top;
            if(totalButtongLength%2!=0){
                half=parseInt(totalButtongLength/2);
                top=half;
            }

            for(var num = 0;num<totalButtongLength;num++){
                if(num<half){
                    btn[num].style.position = "absolute";
                    btn[num].style.top = num*30 + "px";
                    btn[num].style.left = num*30 + "px";
                }else{
                    btn[num].style.position = "absolute";
                    btn[num].style.top = (totalButtongLength-1-num)*30 + "px";
                    btn[num].style.left = num*30 + "px";
                }
                if(top&&num==top){
                    btn[top].style.position = "absolute";
                    btn[top].style.top = top*30 + "px";
                    btn[top].style.left = top*30 + "px";
                }

            }


        };
    </script>
</head>
<body>

</body>
</html>

【热门文章】