javascript - 求大神帮助关于JS中创建元素节点的问题-PHP中文网问答

我遇到的问题是，通过appendChild创建的元素如果创建多个元素的话，创建的第一个元素有一部份样式没有，不知道去哪里了。如下面是我写的代码。循环创建的p标签。第一个p标签里面少了top与left这两个样式。求大神帮看一下，是我哪里写错了，还有就是op_x刷新都是0.iaoBox_ge = [0, 0, 0, 0];这个数组里面，无论怎么刷新都是第一个数组有变动，后面的几个数怎么刷新都是0。求大神帮看看我哪里弄错了哈。谢谢。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>00015定位式流动布局</title>
        <style>
            * {
                padding: 0px;
                margin: 0px;
            }
            
            #Box {
                height: 500px;
                position: relative;
                
                
            }
            
            .xdsss {
                margin-top: 10px;
            }
        </style>
        <script>
        //获取最小索引值
            function cherkHerigt(op_xiaoBox_ge) {
                var ch_height = 0000000;
                var index = 0;
                for(var i = 0; i < op_xiaoBox_ge.length; i++) {
                    var height_a = op_xiaoBox_ge[i].offsetHeight;
                    if(op_xiaoBox_ge < ch_height) {
                        ch_height = height_a;
                        index = i;
                        
                    };
                    
                };
                return index;
            };

            //
            window.onload = function() {
                var op = document.getElementById('Box');
                //var op_xiaoBox = op.getElementsByTagName('p');
                var Vw = document.documentElement.clientWidth;
                var Vh = document.documentElement.clientHeight;

                var op_xiaoBox_width = 280 + 10; //p盒子的固定宽度+边距
                var op_xiaoBox_num = Math.floor(Vw / op_xiaoBox_width); //Math.floor();向下取整
                
                op.style.width = op_xiaoBox_width * op_xiaoBox_num + "px";//op的总宽度
                op.style.background = "darkred";
                op.style.margin = "0 auto"; //op盒子居中显示

                //初始一个数组/数组对应op_xiaoBox_width的个数
                var op_xiaoBox_ge = [0, 0, 0, 0];
                
                //循环在op里创建p图片容器
                for(var i = 1; i < 8; i++) {
                    var oHeight = Math.ceil(Math.random(300-200)*500); //生成随机数
                    var op_changjian = document.createElement('p');
                    
                    op_changjian.style.top = op_xiaoBox_ge[min_index] + "px";
                    op_changjian.style.left = min_index * op_xiaoBox_width + "px";
                    op_changjian.style.width = 280+10 +"px";
                    op_changjian.style.height = oHeight + "px";
                    op_changjian.style.position = "absolute";
                    op_changjian.style.backgroundColor = "#992288";
                    op_changjian.style.float = "left";
                    
                    //op_changjian.appendChild(oImg);
                    
                    //得到返回的索引值
                    var min_index = cherkHerigt(op_xiaoBox_ge);
                    //alert(min_index);
                    op.appendChild(op_changjian);
                    op_xiaoBox_ge[min_index] += op_changjian.offsetHeight + 8;
                }
            }
        </script>
    </head>

    <body>
        <p id="Box">

        </p>
    </body>

</html>

//循环在op里创建p图片容器 for(var i = 1; i < 8; i++) { //得到返回的索引值 var min_index = cherkHerigt(op_xiaoBox_ge); var oHeight = Math.ceil(Math.random(300-200)*500); //生成随机数 var op_changjian = document.createElement('p'); op_changjian.style.top = op_xiaoBox_ge[min_index] + "px"; op_changjian.style.left = min_index * op_xiaoBox_width + "px"; op_changjian.style.width = 280+10 +"px"; op_changjian.style.height = oHeight + "px"; op_changjian.style.position = "absolute"; op_changjian.style.backgroundColor = "#992288"; op_changjian.style.float = "left"; //op_changjian.appendChild(oImg); //alert(min_index); op.appendChild(op_changjian); op_xiaoBox_ge[min_index] += op_changjian.offsetHeight + 8; }

全部回复(3)

PHPz2017-04-10 17:55:18 3楼

谢邀。
不知道你要什么效果，var min_index = cherkHerigt(op_xiaoBox_ge);提前了是可以改变的。