javascript - 求大神帮助关于JS中创建元素节点的问题
本文介绍了javascript - 求大神帮助关于JS中创建元素节点的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
我遇到的问题是，通过appendChild创建的元素如果创建多个元素的话，创建的第一个元素有一部份样式没有，不知道去哪里了。如下面是我写的代码。循环创建的DIV标签 。第一个DIV标签里面少了top与left这两个样式。求大神帮看一下，是我哪里写错了，还有就是odiv_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(odiv_xiaoBox_ge) {
var ch_height = 0000000;
var index = 0;
for(var i = 0; i < odiv_xiaoBox_ge.length; i++) {
var height_a = odiv_xiaoBox_ge[i].offsetHeight;
if(odiv_xiaoBox_ge < ch_height) {
ch_height = height_a;
index = i;
};
};
return index;
};
//
window.onload = function() {
var oDiv = document.getElementById('Box');
//var oDiv_xiaoBox = oDiv.getElementsByTagName('div');
var Vw = document.documentElement.clientWidth;
var Vh = document.documentElement.clientHeight;
var oDiv_xiaoBox_width = 280 + 10; //DIV盒子的固定宽度+边距
var oDiv_xiaoBox_num = Math.floor(Vw / oDiv_xiaoBox_width); //Math.floor();向下取整
oDiv.style.width = oDiv_xiaoBox_width * oDiv_xiaoBox_num + "px";//oDiv的总宽度
oDiv.style.background = "darkred";
oDiv.style.margin = "0 auto"; //oDiv盒子居中显示
//初始一个数组/数组对应oDiv_xiaoBox_width的个数
var odiv_xiaoBox_ge = [0, 0, 0, 0];
//循环在oDiv里创建DIV图片容器
for(var i = 1; i < 8; i++) {
var oHeight = Math.ceil(Math.random(300-200)*500); //生成随机数
var oDiv_changjian = document.createElement('div');
oDiv_changjian.style.top = odiv_xiaoBox_ge[min_index] + "px";
oDiv_changjian.style.left = min_index * oDiv_xiaoBox_width + "px";
oDiv_changjian.style.width = 280+10 +"px";
oDiv_changjian.style.height = oHeight + "px";
oDiv_changjian.style.position = "absolute";
oDiv_changjian.style.backgroundColor = "#992288";
oDiv_changjian.style.float = "left";
//oDiv_changjian.appendChild(oImg);
//得到返回的索引值
var min_index = cherkHerigt(odiv_xiaoBox_ge);
//alert(min_index);
oDiv.appendChild(oDiv_changjian);
odiv_xiaoBox_ge[min_index] += oDiv_changjian.offsetHeight + 8;
}
}
</script>
</head>
<body>
<div id="Box">
</div>
</body>
</html>解决方案
谢邀。
不知道你要什么效果，var min_index = cherkHerigt(odiv_xiaoBox_ge);提前了是可以改变的。
//循环在oDiv里创建DIV图片容器
for(var i = 1; i < 8; i++) {
//得到返回的索引值
var min_index = cherkHerigt(odiv_xiaoBox_ge);
var oHeight = Math.ceil(Math.random(300-200)*500); //生成随机数
var oDiv_changjian = document.createElement('div');
oDiv_changjian.style.top = odiv_xiaoBox_ge[min_index] + "px";
oDiv_changjian.style.left = min_index * oDiv_xiaoBox_width + "px";
oDiv_changjian.style.width = 280+10 +"px";
oDiv_changjian.style.height = oHeight + "px";
oDiv_changjian.style.position = "absolute";
oDiv_changjian.style.backgroundColor = "#992288";
oDiv_changjian.style.float = "left";
//oDiv_changjian.appendChild(oImg);
//alert(min_index);
oDiv.appendChild(oDiv_changjian);
odiv_xiaoBox_ge[min_index] += oDiv_changjian.offsetHeight + 8;
}这篇关于javascript - 求大神帮助关于JS中创建元素节点的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
