js和jq中常见的各种位置距离之offsetLeft和position().left的区别
Posted 吴秋彤的博客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
注：此文为原创，如需转载请注明出处。
以上是关于js和jq中常见的各种位置距离之offsetLeft和position().left的区别的主要内容，如果未能解决你的问题，请参考以下文章
JQ的offset().top与JS的getBoundingClientRect区别详解，JS获取元素距离视窗顶部可变距离