<!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！！！

获取不到offsetHeight问题的更多相关文章

  1. js使用offsetHeight获取div高度为0的问题

    今晚试了好久没弄出来,后来获取子一层的div就能获取到高度了 我的情况是这样的:我在最外面写一个<div id="mainBody">,  里面写bootstrap的d ...

  2. offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop区别

    这些高度相信很多同学都搞不清楚吧.这里我通过本地测试,发现了区别. 以聊天窗口为例. 元素(class='content')高度444px,其中上下padding分别是10px,margin为0.距离 ...

  3. iOS UIWebView 获取内容实际高度，关闭滚动效果

    本文转载至 http://my.oschina.net/Khiyuan/blog/341535   iOS UIWebView 获取内容实际高度,关闭滚动效果 近期做东西,将 UIWebView 嵌套 ...

  4. bootstrap插件思路整理

    知识有时也需温故知新嘛,本次做一次bs插件梳理. $.support.transition 通过判断自定义元素是否支持WebkitTransition.MozTransition.OTransitio ...

  5. js判断页面出现滚动条

    当可视区域小于页面的实际高度时,判定为出现滚动条 当我们在获取页面的offsetHeight高度时是包括了浏览器的边框的,浏览器的边框是2个像素, if (document.documentEleme ...

  6. Vue中过度动画效果应用

    一.实现动画过渡效果的几种方式 实现动画必须要将要进行动画的元素利用<transition>标签进行包裹 1.利用CSS样式实现过渡效果 <transition name=" ...

  7. jquery html() callback

    通过JQuery的.html()函数我们可以非常方便地加载一段HTML到指定的元素中,例如给<div></div>中放入一组图片.问题是JQuery的.html()函数是同步的 ...

  8. JS判断页面是否出现滚动条

    今天无聊,帮一个网友解决一个很无聊的问题,用JS判断页面是否出现滚动条,在网上看了一些代码,经过验证并不起作用,下面是在网上搜索到的代码: 当可视区域小于页面的实际高度时,判定为出现滚动条,即: if ...

  9. Javascript Event事件-总结

    一.事件类型 例如:mouseover鼠标移动到.keydown键盘按下 二.事件目标 是发生的事件或与之相关的对象,window.document和Element对象是最常见的事件目标 三.事件对象 ...

随机推荐

  1. 03.JavaScript简单介绍

    一.JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言) N ...

  2. Python 内置装饰器

    内置的装饰器 ​ 内置的装饰器和普通的装饰器原理是一样的,只不过返回的不是函数,而是类对象,所以更难理解一些. @property ​ 在了解这个装饰器前,你需要知道在不使用装饰器怎么写一个属性. d ...

  3. luoguP2735 电网 Electric Fences

    一道校内模拟赛遇见的题 ** 不会正解就真的很麻烦的 数学题 ** 有一种东西叫 皮克定理 发现的千古神犇: 姓名:George Alexander Pick(所以叫皮克定理呀 国籍:奥地利(蛤!竟然 ...

  4. java 内部类的继承

    因为内部类的构造器必须连接到指向其外部类对象的引用. 因为在继承内部类的时候那个指向外部类对象的"秘密的"引用必须被初始化,而在导出类中不再存在可连接的默认对象,要解决这个问题必须 ...

  5. Spring 事务管理基础知识点

    参考文章 spring事物配置,声明式事务管理和基于@Transactional注解的使用 尚硅谷 佟刚 Spring视频教程PPT Spring支持编程式事务管理和声明式事务管理两种方式 编程式事务 ...

  6. JDBC核心API

    JDBC核心API在java.sql.*和javax.sql.* 1.Driver接口:表示Java驱动程序接口,具体的数据库厂商要实现其此接口 connect(url.propertis):连接数据 ...

  7. day7回顾

    静态方法: 与类无关,不能访问类里的任何属性和方法 类方法: 只能访问类变量 属性@property 把一个方法变成一个静态属性 反射 getattr(obj,str) setattr(obj,str ...

  8. Linux下文件压缩与打包

    Linux常用压缩命令compresscompress压缩出来的文件的后缀是.Z,解压命令是ucompresscompress -c 文件 > 压缩后的文件名 ,选项-v显示压缩过程,选项-c的 ...

  9. js 获取时间戳的方法

    (new Date()).valueOf()1541569364658(new Date()).getTime()1541569372623Number(new Date())154156938662 ...

  10. 【BZOJ】1152: [CTSC2006]歌唱王国Singleland

    题解 读错题了,是最后留下一个牛人首长歌颂他,和其他人没有关系,t就相当于数据组数 结论题,具体可看 https://www.zhihu.com/question/59895916/answer/19 ...