javascript浮动布局转成定位布局方法


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style>
body,ul{margin:0;padding:0;}
li{list-style:none};
.clear{zoom:1}
.clear:after{content:"";display:block;clear:both;}
#box {width:200px; height:200px;margin:55px auto;}
#box ul{ width:200px; overflow:hidden;}
#box li { width:50px; height:50px; background:red; float:left; margin:5px;}
</style></head><body>
<div id="box">
    <ul class="clear">
     <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
</html>
<script>

var oUl=document.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var arr=[]; //定个空数组存放li浮动时候的位置；

for(var i=0;i<aLi.length;i++) { // 存li浮动时的位置
arr.push([aLi[i].offsetLeft,aLi[i].offsetTop]);
}
for(var i=0;i<aLi.length;i++) { //开始转化 
aLi[i].style.position='absolute'; //注：这里定位不能和上一个for循环在一起
aLi[i].style.left=arr[i][0]+'px';
aLi[i].style.top=arr[i][1]+'px';
aLi[i].style.margin=0;
}</script>
本文来源：http://lvhui.org/?p=105JavaScript浮动布局转成定位布局方法HTML布局