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. 【Lintcode】382.Triangle Count

    题目: Given an array of integers, how many three numbers can be found in the array, so that we can bui ...

  2. nginx 轮询模式 nginx_upstream_jvm_route 插件安装

    使用nginx_upstream_jvm_route插件的目的是为了保证在轮询机制下的session的共享 前提:源码方式安装nginx.patch命令 1.下载nginx_upstream_jvm_ ...

  3. 发个IOCP的C++例子

    IOCP的c++例子 IOCP这个东西连续关注了将近3年的时间,这个代码从哪里找到的已经忘了,下面是作者的信息.感谢他提供的代码! /*++ Copyright (c) 2004 模块名: iomod ...

  4. CentOS7的网络配置

    1.DNS配置 新安装的虚拟机,ping 内网IP可以,但是ping 外网域名却失败,告知“Name or service not known”. 原来是因为需要在/etc/sysconfig/net ...

  5. codevs2189数字三角形w——最优性转化

    题目:http://codevs.cn/problem/2189/ 通过增加一维,将最优性转化为可行性. 代码如下: #include<iostream> #include<cstd ...

  6. Java高并发（1）

    1.同步和异步的区别和联系: 所谓同步,可以理解为在执行完一个函数或方法之后,一直等待系统返回值或消息,这时程序是出于阻塞的,只有接收到 返回的值或消息后才往下执行其它的命令. 异步,执行完函数或方法 ...

  7. [提高班] 2017 Summer Training Day1补题

    题目地址:https://vjudge.net/contest/175939#overview A.数据范围是10^9,所以需要一个巧思路.对于一个数n,如何去判定比它的所有数是否是二进制形式.比n小 ...

  8. Teams Formation

    题意: 给定一长度为 n 的整数序列 $a$,将其复制m次,并接成一条链,每相邻K个相同的整数会消除,然后其他的整数继续结成一条链,直到不能消除为止,求问最终剩余多少个整数. 解法: 首先将长度为n的 ...

  9. RPC原理与实践（一）----RPC原理与实现（Thrift版）

    什么是RPC?为什么要使用RPC? 首先什么是RPC,RPC全称Remote Process Call,远程过程调用,现在几乎所有的公司都在使用RPC这种架构,诸如YOUTUBE使用的Thrift,B ...

  10. Git 分支管理 Feature分支 强行删除分支

    软件开发中,总有无穷无尽的新的功能要不断添加进来. 添加一个新功能时,你肯定不希望因为一些实验性质的代码,把主分支搞乱了, 所以,每添加一个新功能,最好新建一个feature分支, 在上面开发,完成后 ...