js控制div的top和left

JavaScript020

js控制div的top和left,第1张

你先说明白了,这些div都是什么定位(肯定不能是static定位)?宽度高度是否都一样?

换行倒是容易,只需:

var divs = [ ... ]// 100个

var left=0, top = 0

var i

for (i=0i<divs.length++i) {

// 把divs[i]放到(left, top)处

left += divs[i].offsetWidth// 假定没有外边距,这是下一个div的left

if (0 == (i + 1) % 10) {

left = 0// left复位的最左边

top += ?// 换到下一行

}

}

这里的“?”,由你来决定,如果这些div的高度都一样,那么任取其中一个的offsetHeight就可以了,否则你必须搜索并选取这一行offsetHeight最大的那个。

首先要取得top值和left值,先要把这个div的定位设为

relative

或者

absolute

比如:

<div

id="tiao"

style="margin-top:

3margin-left:

-5width:

470height:

25position:relative"

></div>

top值:

document.getElementById('tiao').offsetTop+document.body.scrollTop

left值:document.getElementById('tiao').offsetLeft

<script type="text/javascript">

function createDIV(){

var div=document.createElement("div")//创建一个DIV

div.setAttribute("id", "div")

document.body.appendChild(div)//主要加上这句,把新建的DIV加到页面上。

var left = div.offsetLeft

setInterval(

function () {

left -= 10

div.style.left = left+"px"

},

50)

}

</script>

这样就可以了