获取页面定位元素left top

时间:2021-10-30 04:41:01

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有巨大的优势。