zoukankan      html  css  js  c++  java
  • 获取不到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="images/0.jpg" alt=""></li>
                <li><img src="images/1.jpg" alt=""></li>
                <li><img src="images/2.jpg" alt=""></li>
                <li><img src="images/3.jpg" alt=""></li>
                <li><img src="images/4.jpg" alt=""></li>
                <li><img src="images/5.jpg" alt=""></li>
                <li><img src="images/6.jpg" alt=""></li>
                <li><img src="images/7.jpg" alt=""></li>
                <li><img src="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!!!

  • 相关阅读:
    今日进度
    2020年9月29日Java学习日记
    2020年7月28日Java学习日记
    2020年10月13日Java学习日记
    2020年8月30日Java学习日记
    2020年10月10日Java学习日记
    2020年8月27日Java学习日记
    2020年10月6日Java学习日记
    2020年7月29日Java学习日记
    2020年10月3日Java学习日记
  • 原文地址:https://www.cnblogs.com/liveoutfun/p/9603998.html
Copyright © 2011-2022 走看看