获取不到offsetHeight问题_随笔

获取不到offsetHeight问题

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

         *{

           margin: 0;

           padding: 0;

         }

         .imgBox ul{

            list-style: none;

            width:630px;

            margin:0 auto;

            position:relative;

         }

         .imgBox ul li {

          // width:200px;

           //height: 150px;

           float:left;

           margin-right:10px;

         }

    </style>

</head>

<body>

      <div id="imgBox" class="imgBox">

        <ul>

            <li><img src="data:images/0.jpg" alt=""></li>

            <li><img src="data:images/1.jpg" alt=""></li>

            <li><img src="data:images/2.jpg" alt=""></li>

            <li><img src="data:images/3.jpg" alt=""></li>

            <li><img src="data:images/4.jpg" alt=""></li>

            <li><img src="data:images/5.jpg" alt=""></li>

            <li><img src="data:images/6.jpg" alt=""></li>

            <li><img src="data:images/7.jpg" alt=""></li>

            <li><img src="data:images/8.jpg" alt=""></li>

        </ul>

     </div>

    <script>

       var imgBox=document.getElementById("imgBox");

       var lis=document.getElementsByTagName("li");

       var arr=[];

       for(var i=0;i<lis.length;i++){

           arr[i]={left:lis[i].offsetLeft,top:lis[i].offsetTop};

       }

       console.log(arr);

        for(var j=0;j<lis.length;j++){

             lis[j].style.left=arr[j].left+"px";

             lis[j].style.top=arr[j].top+"px";

              lis[j].style.position="absolute";

        }

    </script>

</body>

</html>

这段代码相信大家都能看懂如果不设置li元素的宽高获取到的offsetTop始终是0！！！

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/589431.html

获取不到offsetHeight问题

发表评论

评论列表（0条）