[Js]布局转换

为什么要布局转换？

要这样的效果，单写css，只要给每个li浮动就行，不需要绝对定位。但是比如做一些效果（如鼠标移入图片变大），就需要改变位置了。直接给每个li在css上定好位置不方便，也不知道有几个li

 

<ul id="ul1">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

 

#ul1{position: relative; width: 500px; margin: 20px auto;}
#ul1 li{ float: left; width: 100px; height: 100px; margin: 10px; border: 1px solid #000; list-style: none;}

window.onload=function(){
    var ul1=document.getElementById("ul1");
    var oLi=ul1.getElementsByTagName("li");
    var i=0;
    for(i=0;i<oLi.length;i++){
        oLi[i].style.left=oLi[i].offsetLeft+'px';
        oLi[i].style.top=oLi[i].offsetTop+'px';        
    }
    for(i=0;i<oLi.length;i++){
        oLi[i].style.position='absolute';      //定好位置再循环设position，直接在上面设，会揉成一个li
        oLi[i].style.margin='0';
    }
};