offsetLeft:元素的边框的外边缘距离与已定位的父容器（offsetparent）的左边距离（不包括元素的边框和父容器的边框）。

offset().left：返回的是相对于当前文档的坐标,使用offset()方法不管该元素如何定位，也不管其父元素如何定位，都是获取的该元素相对于当前窗口的偏移坐标

附上调试代码：

     <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( "offsetLeft: " + child.offsetLeft);

         console.log( "offset().left: " + $("#child").offset().left);

        </script>

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

js和jq中常见的各种位置距离之offset和offset()的区别（三）的更多相关文章

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

    offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(不包括元素的边框和父容器的边框).position().left:使用position().left ...

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

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

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

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

  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. 业务逻辑: Quartz的整合应用

    1. 请谈一下你对Quartz的理解 思路:根据他解决的什么问题方面去阐述 2. 完成quartz和spring的整合应用 思路:触发时间.任务调度工程 步骤: 1. 创建maven工程,并导入qua ...

  2. QT中显示图像数据

    博客转载自:https://blog.csdn.net/lg1259156776/article/details/52325091 一般图像数据都是以RGBRGBRGB……字节流的方式(解码完成后的原 ...

  3. c# ??和运算符先后的问题

    ; ; - not1??; Console.WriteLine(a); 输出结果为:10 问题因该是??运算符没有-的优先级高,实际这个 操作等于: ; ; - not1)??); 解决这个问题的办法 ...

  4. java中是如何解决编码问题的，比如char类型的对象是如何存储的呢？

    主题句:每个编码形式将字符从字符集转换为编码数据. 说白了一个代码点就是一个Unicode字符.代码单元就是代码点的集合. 字符视图 要了解字符集标准,您必须能区分三种不同的字符视图: 字符集(字符的 ...

  5. IB使用

    A:给控件添加方法或变量. 1.窗口上拖个控件 NSButton 2..点右上那张狗脸(Editor)对上的. 3.右键控件.拖到头文件中. 4 .选择加响应方法或变量.

  6. hdu4283 You Are the One

    传送门 题目 The TV shows such as You Are the One has been very popular. In order to meet the need of boys ...

  7. Django框架 之 Cookie和Session初识

    Django框架 之 Cookie和Session初识 浏览目录 Cookie介绍 Django中的Cookie Session 一.Cookie介绍 1.Cookie产生的意义 众所周知,HTTP协 ...

  8. Entity Framework Tutorial Basics（9）：Entity Relationships

    这篇前面已经转载出来了,地址:http://www.cnblogs.com/purplefox2008/p/5646466.html

  9. 选择设置好ext3日志模式

    Linux是一种开放的.因Internet而产生的操作系统.Internet的发展.以网络为中心的计算模式如电子商务被迅速接受和普及,都为 Linux提供了更巨大的机会,使之成为企业和部门级的首选平台 ...

  10. [译]javascript中定义函数的各种方法

    本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...