获取页面定位元素left top

1原生方法：

第一种方法，比较简单，就是直接通过obj.style.left和obj.style.top，但是有局限性，这种获取的方法只能获取到行内样式的left和top的属性值，不能获取到style标签和link 外部引用的left和top属性值。

第二种方法 只读，可以获取所有style样式，存在兼容性问题，在标准浏览器中可以通过window.getComputedStyle(对象，null).left方法来获取元素的left和top的属性值。而在IE浏览器上则是采用obj.currentStyle.left方法来获取属性值。

 第三种方法，使用obj.offsetLeft来获取对象的left属性值,用obj.offsetTop来获取对象的top属性值。

2jq方法：

可以使用如下代码来获取

var left = $('#test').css('left');
var top = $('#test').css('top');

但是这样获取的是一个字符串**px;

var left = $('#test').position().left;
var top = $('#test').position().top;
或者

var left = $('#test').offset().left;
var top = $('#test').offset().top;
获取的是number可以直接进行运算；

 

JS下的offsetLeft和style.left，以及jquery的css("left")，对定位的理解相似，如果父元素中有定位元素，都是相对于上一个定位元素（position不为static）定位。值得一提的是如果没有已经定位的父元素，那么offsetLeft指向的是文档（document）的左边缘，而style.left与css（"left"）指向的是body的左边缘，如果body默认存在margin的话，他们取得的值是不一样的。jquery的offset().left，它永远是相对于文档的左边缘（往往体现为浏览器的左边缘）定位的，这样的话使用jquery就可以在不同的应用场景采用不同的方法来获取元素的位置，相比较原生JS有巨大的优势。

 

转载于:https://www.cnblogs.com/vickya/p/8384752.html