js和jq中常见的各种位置距离之offsetLeft和position().left的区别（四）
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的区别（四）的更多相关文章
- js和jq中常见的各种位置距离之offset()和position()的区别（二）
offset()返回的是相对于当前文档的坐标,position()返回的是相对于其定位的祖辈元素的坐标. 使用position()方法时事实上是把该元素当绝对定位来处理,获取的是该元素相当于最近的一个 ...
- js和jq中常见的各种位置距离之offsetLeft/clientLeft/scrollLeft （一）
offsetLeft offsetTop offsetWidth offsetHeight offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(不包括元 ...
- js和jq中常见的各种位置距离之offset和offset()的区别（三）
offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(不包括元素的边框和父容器的边框). offset().left:返回的是相对于当前文档的坐标,使用o ...
- HTML中常见的各种位置距离以及dom中的坐标讨论
最近在学习JavaScript,特意买了一本犀牛角书来看看,尼玛一千多页,看的我头昏脑涨,翻到DOM这章节,突然记起平常在使用DOM时,碰到了好多的这个dom里面的各种宽度,高度,特意在此写一写,写的 ...
- Ajax 请求头中常见content-type
四种常见的 POST 提交数据方式 HTTP 协议是以 ASCII 码传输,建立在 TCP/IP 协议之上的应用层规范.规范把 HTTP 请求分为三个部分:状态行.请求头.消息主体.协议规定 POST ...
- js中常见的问题
js中常见的问题 原文链接 1.js获取select标签选中的值 原生js var obj = document.getElementByIdx_x(”testSelect”); //定位id var ...
- JS：JS中常见的 “函数名 is not a function” 错误
js中常见的错误,例如Uncaught TypeError: x is not a function 其原因除了函数本身有错之外,还有一种很奇怪的情况:函数本身没有错,但是运行时就是不能正常运行.这种 ...
- JS中常见设计模式总结
github: https://github.com/14glwu/FEInterviewBox/tree/master/JS%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F ...
- js从数组中删除指定值（不是指定位置）的元素
RT: js从数组中删除指定值的元素,注意是指定值,而不是指定位置. 比如数组{1,2,3,4,5},我要删除其中的元素3,但是这个3的位置我是不知道的,只知道要删除值为3的这一个元素,请问要怎么写? ...
随机推荐
- tensorflow kmeans 聚类
iris: # -*- coding: utf-8 -*- # K-means with TensorFlow #---------------------------------- # # This ...
- (转)C/C++——auto，static，register，extern用法
转自:https://blog.csdn.net/u010757264/article/details/49932829 C++中变量.函数的属性包括数据类型和存储类别.存储类别分为静态存储和动态存储 ...
- python 生成特定间隔数列的方法
(1)range() 和 xrange( )[python内置函数] range(开始,结束,间隔). 值得注意的是:生成数列最后一个数< 结束值. 返回结果类型:list,其中元素是integ ...
- PyNLPIR python中文分词工具
官网:https://pynlpir.readthedocs.io/en/latest/ github:https://github.com/tsroten/pynlpir NLP ...
- <C++>友元与虚函数的组合
为类重载<<与>>这两个运算符时,重载函数必须为该类的友元函数. 当友元不能被继承,故不能当作虚函数,无法使用多态. 可以用以下结构实现友元与虚函数的组合. class bas ...
- poj3784 Running Median[对顶堆]
由于我不会讲对顶堆,所以这里直接传上一个巨佬的学习笔记. 对顶堆其实还是很容易理解的,想这题的时候自己猜做法也能把没学过的对顶堆给想出来.后来了解,对顶堆主要还是动态的在线维护集合$K$大值.当然也可 ...
- ACM学习历程——POJ3321 Apple Tree（搜索，线段树）
Description There is an apple tree outside of kaka's house. Every autumn, a lot of apples will ...
- 数据结构与算法（2）----->字符串
1. 字符串的一些特点 1.1 广泛性 (1)字符串可以看作是字符类型的数组----->所以可能会涉及排序+查找; (2)很多问题都可以转化为字符串类型的方法去解决; 需要注意的是:用java ...
- JQuery Mobile+cordova构建一个Android项目
1.安装Android开发环境 Android开发环境的安装,现在主要是由于不能访问谷歌站点,在windows下在host文件中添加一个对应的74.125.195.190 dl-ssl.goo ...
- kkkk
monkey -p com.alfl.www -v -v -v --throttle 50 --pct-touch 30 --pct-motion 15 --pct-nav 15 --pct-ma ...