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

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

附上调试代码:

 1     <style>
 2     *{margin:0;padding:0;}
 3         #parent{ position: relative; padding: 10px; margin:30px; background-color:#CCC; border: solid 10px #fbc;}
 4         #child{ height: 200px; width: 200px; padding: 10px; margin: 30px;border: solid 10px #fbc;background-color:#afb;}
 5     </style>
 6     <body>
 7         <div id="parent">
 8             <div id="child">
 9             </div>
10            </div>
11            <script src="jquery_1.11.3.min.js"></script>
12         <script>
13
14         var child = $("#child").get(0)
15         console.log( child.offsetLeft);
16         console.log( $("#child").position().left);
17         </script>

注:此文为原创,如需转载请注明出处。

时间: 2024-08-24 09:07:23

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

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

offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(不包括元素的边框和父容器的边框). offset().left:返回的是相对于当前文档的坐标,使用offset()方法不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前窗口的偏移坐标 附上调试代码: 1 <style> 2 *{margin:0;padding:0;} 3 #parent{ position: relative; padding: 10px; margin:3

HTML中常见的各种位置距离(clientTop clientLeft clientWidth ClientHeight offsetleft offsettop offsetwidth offsetheight等等)以及dom中的坐标讨论

最近在学习JavaScript,特意买了一本犀牛角书来看看,尼玛一千多页,看的我头昏脑涨,翻到DOM这章节,突然记起平常在使用DOM时,碰到了好多的这个dom里面的各种宽度,高度,特意在此写一写,写的不好或者写错了,欢迎各位指正.好了废话不多说,开始进入主题. 这篇文章主要讨论两点: 一.DOM中各种宽度.高度 二.DOM中的坐标系 下面我们看看DOM中都有一些什么宽度.高度. 常见的 offsetWidth clientWidth scrollWidth offsetHeight client

JS、JQ中判断checkbox是否选中

HTML <input type="checkbox" class="checkbox" /> JS var check = document.getElementsByTagName('input')[0]; console.log(check.checked); JQ 1. $("input[type='checkbox']").is(':checked'); 2. $("input[type='checkbox']&q

js寻找字符串中a出现的位置和次数

var str='dgfsfsahgdagfdsa'; var n=0; var arr=[]; while(str.indexOf('a',n) != -1){ var m=str.indexOf('a',n); n=m+1; arr.push(m); } alert('a出现的位置'+arr+',出现的次数:'+arr.length); 原文地址:https://www.cnblogs.com/zard23/p/9197535.html

js中常见的数据类型

js中常见的数据类型分为两种:基本数据类型.复杂数据类型. 基本数据类型把数据名和值直接存储在栈中. 复杂数据类型在栈中存储数据名和一个堆的地址,在堆中存储属性及值.访问时先从栈获取地址, 再到堆中拿出相应的值 总结:基本数据类型复制的是值,复杂数据类型复制的是引用地址. 为什么划分数据类型? 计算机为了更方便的对内存进行管理,对不同的数据,做了类型上的划分. 如何查看一个变量的数据类型? 使用typeof命名 例如: var x = 5; var res typeof x; 变量的数据类型有

jq中连续删除的操作;以及js中连续删除的操作;jq方法中如何写循环。

jq中连续删除的操作 采用的是用父节点的来进行删除,不能直接利用$(XXX)来回去父节点来进行删除.存在逻辑上的错误. js中的连续删除 和jq中删除是一个道理,同样实在利用父节点去删除子节点.获取当前单击元素的父节点.利用来删除子节点. 至于寻找祖先中的哪一个,就要看,要删除的什么内容了. jq方法中如何写循环. jq中写循环,一般应该用each进行循环.但是利用for循环也是可以.但是有一个需要注意的地方.for循环不能在jq中的方法中出现,不会执行.也就是说,在jq中需要去写一个新的方法,

D3.js使用过程中的常见问题(D3版本D3V4)

目录 一.学习D3我必须要学习好SVG矢量图码? 二.如何理解D3给Dom节点绑定数据时的Update.Enter和Exit模式 三.D3绑定数据时用datum与data有什么不一样? 四.SVG图中用attr来设置属性和用style来设置样式时,用style来设置样式的权重会更高 五.D3使用链式写法时,写完transition动画后不能链着继续写append添加元素操作 六.如何给path设置缓动? 七.D3普通的缓动动画 八.给节点添加title,鼠标mouseover显示普通提示文本效果

JQ中的clone()方法与DOM中的cloneNode()方法

JQ中的clone()方法与DOM中的cloneNode()方法 cloneNode()定义和用法 cloneNode()方法创建节点的拷贝,并返回该副本. 语法: node.cloneNode(deep);  其接收一个可选参数"deep",为布尔类型,默认是false. 当设置为true,克隆当前节点,属性及当前节点的后代.若设置为false,仅仅克隆当前元素节点本身. 扩展:  使用cloneNode()方法,当被克隆的节点绑定了事件处理程序,事件处理程序是否会被一同克隆,这个我

2016年4月27日_JAVA学习笔记_JAVA中常见的API(一)String

1.String在JAVA中是一个单独的类,只不过是一种特殊的,专门用来表示字符串的类.之前接触到的创建方式很简单,就是跟C语言中创建变量一样, String aString = "This is a String."; //变量类型为String,变量名为aString,内容为"This is a String.". 在学习API时,接触到了一种特别的创建方式.因为String是一个类,那么就肯定可以用其构造器方法来创建相应的对象. String aString