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. 数字图像处理实验（7）：PROJECT 04-03 ， Lowpass Filtering 标签： 图像处理MATLAB 2017-05-25 09:30 109人

    实验要求: Objective: To observe how the lowpass filtering smoothes an image. Main requirements: Ability ...

  2. javascript 准确的判断类型方法

    在 JavaScript 里使用 typeof 来判断数据类型,只能区分基本类型,即 “number”,”string”,”undefined”,”boolean”,”object” 五种. 对于数组 ...

  3. c# 的默认访问修饰符小结（转）

    c# 的访问修饰符是private 还是 internal? 准确的说,不能一概而论. [MSDN] Classes and structs that are not nested within ot ...

  4. [译]我们应该在HTML文档中何处放script标签

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

  5. The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

    刚才Insus.NET有尝试改一段代码,是让用户能动态变更网页背景图片的小功能.当Insus.NET去执行铵钮Click事件时,它却出现标题的错误.代码是这样的: 此代码,原本是没有什么问题的,但现在 ...

  6. c++滚动数组

    说来惭愧,我老早以前就学习了dp,可直到最近才知道滚动数组. 所以说,滚动数组是什么呢? 它是一种优化dp空间复杂度的思想. 在dp转移时,我们往往不需要之前推的所有的,而是只需要前一两个转移的. 我 ...

  7. Eavl整理

    一. 严格模式 eval方法只能在非严格模式中进行使用,在use strict中是不允许使用这个方法的. 二. 用法 eval函数会接收一个参数obj,如果obj不是一个字符串,那么eval会直接返回 ...

  8. Android源码、内核编译

    Android源码和内核的编译就是一场马拉松,每一个节点都耗时漫长,下载源码.编译源码.下载内核.编译内核,下载中途会断掉,编译中间会失败,求解再重来,又是一轮马拉松,于是每一步都要做好备份和记录,可 ...

  9. git commit失败

    1.使用命令  git rm test.txt 删除版本库中文件, 下一步:git commit 提交 出现如图: 这是因为没有同时提交信息,即:git commit -m "这里是信息&q ...

  10. luogu p4174 最大获利（最大权闭合子图）

    luogu p4174 最大获利(最大权闭合子图) 给定n个点,m条边,每条边有一个贡献,每个点有一个代价.选择一条边,会付出边所连两个点的代价,问最大代价. 我们换个建图方式:把图G中的边\(e_i ...