offsetLeft:元素的边框的外边缘距离与已定位的父容器（offsetparent）的左边距离（不包括元素的边框和父容器的边框）。
position().left:使用position().left方法时事实上是把该元素当绝对定位来处理，获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置。

附上调试代码：

     <style>

     *{margin:0;padding:0;}

         #parent{ position: relative; padding: 10px; margin:30px; background-color:#CCC; border: solid 10px #fbc;}

         #child{ height: 200px; width: 200px; padding: 10px; margin: 30px;border: solid 10px #fbc;background-color:#afb;}

     </style>

     <body>

         <div id="parent">

             <div id="child">

             </div>

            </div>

            <script src="jquery_1.11.3.min.js"></script>

         <script>

         var child = $("#child").get(0)

         console.log( child.offsetLeft);

         console.log( $("#child").position().left);

         </script>

注：此文为原创，如需转载请注明出处。

js和jq中常见的各种位置距离之offsetLeft和position().left的区别（四）的更多相关文章

  1. js和jq中常见的各种位置距离之offset()和position()的区别（二）

    offset()返回的是相对于当前文档的坐标,position()返回的是相对于其定位的祖辈元素的坐标. 使用position()方法时事实上是把该元素当绝对定位来处理,获取的是该元素相当于最近的一个 ...

  2. js和jq中常见的各种位置距离之offsetLeft/clientLeft/scrollLeft （一）

    offsetLeft offsetTop offsetWidth offsetHeight offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(不包括元 ...

  3. js和jq中常见的各种位置距离之offset和offset()的区别（三）

    offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(不包括元素的边框和父容器的边框). offset().left:返回的是相对于当前文档的坐标,使用o ...

  4. HTML中常见的各种位置距离以及dom中的坐标讨论

    最近在学习JavaScript,特意买了一本犀牛角书来看看,尼玛一千多页,看的我头昏脑涨,翻到DOM这章节,突然记起平常在使用DOM时,碰到了好多的这个dom里面的各种宽度,高度,特意在此写一写,写的 ...

  5. Ajax 请求头中常见content-type

    四种常见的 POST 提交数据方式 HTTP 协议是以 ASCII 码传输,建立在 TCP/IP 协议之上的应用层规范.规范把 HTTP 请求分为三个部分:状态行.请求头.消息主体.协议规定 POST ...

  6. js中常见的问题

    js中常见的问题 原文链接 1.js获取select标签选中的值 原生js var obj = document.getElementByIdx_x(”testSelect”); //定位id var ...

  7. JS：JS中常见的 “函数名 is not a function” 错误

    js中常见的错误,例如Uncaught TypeError: x is not a function 其原因除了函数本身有错之外,还有一种很奇怪的情况:函数本身没有错,但是运行时就是不能正常运行.这种 ...

  8. JS中常见设计模式总结

    github: https://github.com/14glwu/FEInterviewBox/tree/master/JS%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F ...

  9. js从数组中删除指定值（不是指定位置）的元素

    RT: js从数组中删除指定值的元素,注意是指定值,而不是指定位置. 比如数组{1,2,3,4,5},我要删除其中的元素3,但是这个3的位置我是不知道的,只知道要删除值为3的这一个元素,请问要怎么写? ...

随机推荐

  1. findbugs规则

    FindBugs是基于Bug Patterns概念,查找javabytecode(.class文件)中的潜在bug,主要检查bytecode中的bug patterns,如NullPoint空指针检查 ...

  2. EmbarassedBirds全体开发人员落泪

    Github (李昆乘,赖展飞) 现阶段还在开发后期,API调试过程中. 本周无法上线. 全体开发人员留下眼泪. 贴上几个功能图, 给大家尝尝鲜吧! 现阶段仍在API调试 因为队员李昆乘经常出去玩没有 ...

  3. swoole的http服务

    PHP实现基于Swoole简单的HTTP服务器 引用Swoole官方定义: PHP语言的异步.并行.高性能网络通信框架,使用纯C语言编写,提供了PHP语言的异步多线程服务器,异步TCP/UDP网络客户 ...

  4. 局域网扫描IP

    今天有朋友去面试,被问到一个“如何扫描局域网IP”的问题(即找出局域网中当前已使用的IP),朋友回答的不好,回来问我,我首先想到的就是使用ping命令将局域网可分配的IP地址逐个遍历一遍,能ping通 ...

  5. 关于禁用bootstrap响应式解决方法

    前几天接到一个任务,用bootstrap框架写几个静态页面,由于长时间专注于后台开发,所以,花费了3天时间,才终于写完了页面,其中,来回的修改,把遇到的问题说一下. 用bootstarp做完页面后,组 ...

  6. 如何在Mac下显示Finder中的所有文件

    在Unix下工作,你可能需要处理一些“特殊“文件或文件夹,例如/usr,/bin, etcf,或一些"dot files"(如.bash_profile).但是Linux/Unix ...

  7. 千万别用MongoDB？真的吗？！

    某人发了一篇Don’t use MongoDB的血泪控诉,我把原文翻译如下,你可以看看.不过,我想我们还要去看看10gen CTO的对此事的回复,我们还要去在Reddit上看看大家的说法,10gen  ...

  8. 设置可见GPU方式

    只可见第一块GPU os.environ["CUDA_VISIBLE_DEVICES"] = "0"

  9. 【opencv学习笔记四】opencv3.4.0图形用户接口highgui函数解析

    在笔记二中我们已经知道了,在highgui文件夹下的正是opencv图形用户接口功能结构,我们这篇博客所说的便是D:\Program Files\opencv340\opencv\build\incl ...

  10. chromium浏览器开发系列第四篇：如何调试最新chromium

    接二连三的事情,时间比较紧张,但是还是没有把这个系列的文章丢掉,因为这也是对自己知识的总结吧.提倡大家多写写,以后再看的时候会有种莫名的小激动. 上周写的是chromium的目录结构,好像大家不太感兴 ...