js获取元素到文档区域document的坐标方法
获取页面中元素到文档区域document的横向 纵向坐标的两种方法及其比较
在js控制元素运动的过程中 对于页面元素坐标位置的获取是经常用到的 这里主要总结下两种方法
一 通过叠加元素对象和它的offsetParent(如果存在)的offsetLeft/offsetTop属性来实现
在阅读javascript高级程序设计第三版DOM部分时 了解到要获取某个元素在页面上的偏移量 需要将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加 一直循环直至根元素 所以 要得到元素到文档区域的坐标位置 只需通过while循环不断获取offsetParent的offsetLeft/offsetTop直到offsetParent = null为止
js代码
代码如下:
// 获取元素到文档区域的坐标
function getPosition(element) {
var actualLeft = element offsetLeft
actualTop = element offsetTop
current = element offsetParent; // 取得元素的offsetParent
// 一直循环直到根元素
while (current !== null) {
actualLeft += current offsetLeft;
actualTop += current offsetTop;
current = current offsetParent;
}
// 返回包含left top坐标的对象
return {
left: actualLeft
top: actualTop
};
}
例子截图
firebug下测试结果截图 (注 其他浏览器已通过测试!)
二 通过 getBoundingClientRect() 方法实现
getBoundingClientRect方法用于获得页面中某个元素的左 上 右和下分别相对浏览器视窗window的位置 返回的是一个对象 该对象有四个属性 top left right bottom;该方法原本是IE Only的 但是FF +和Opera +已经支持了该方法 可以说在获得页面元素位置上效率有很大的提高 另外 该方法避免使用while循环 而是直接获取数值来实现 比第一种方法性能要好 特别是在复杂的页面上更为明显
js代码
代码如下:
// 获取元素到文档区域的坐标
function getPosition(element){
var dc = document
rec = element getBoundingClientRect()
_x = rec left // 获取元素相对浏览器视窗window的左 上坐标
_y = rec top;
// 与或body元素的滚动距离相加就是元素相对于文档区域document的坐标位置
_x += dc documentElement scrollLeft || dc body scrollLeft;
_y += dc documentElement scrollTop || dc body scrollTop;
return {
left: _x
top: _y
};
}
经测试 该方法与第一种方法获取元素相对于document的坐标大小相同 对于IE低版本浏览器 存在一些差异
注意 记得要累加上(IE除外)或body(针对IE)元素的水平或垂直滚动距离!
lishixinzhi/Article/program/Java/JSP/201311/20207
绛旓細鏌ユ壘鍏冪礌:getElementById()鍜実etElementByTagName()銆乨ocument.getElementsByName()銆傜壒娈婇泦鍚:document.anchors(鎵鏈夊甫name鐗规х殑a鍏冪礌)銆乨ocument.applets(鎵鏈塧pplet鍏冪礌)銆乨ocument.forms(鏂囨。涓墍鏈塮orm鍏冪礌)銆乨ocument.images(鏂囨。涓墍鏈塱mg鍏冪礌)銆乨ocument.links(鏂囨。涓墍鏈夊甫href鐨刟鍏冪礌)DOM涓鑷存ф娴:document.implem...
绛旓細鑰宨d蹇呴』鏄叏鏂囨。涓敮涓鐨 id鐨勭敤閫1锛 id鏄疕TML鍏冪礌鐨処dentity锛屼富瑕佹槸鍦ㄥ鎴风鑴氭湰閲岀敤銆2锛 label涓巉orm鎺т欢鐨勫叧鑱旓紝濡 My Input for灞炴ф寚瀹氫笌label鍏宠仈鐨勫厓绱犵殑id锛屼笉鍙敤name鏇夸唬3锛夎剼鏈腑鑾峰緱瀵硅薄锛欼E鏀寔鍦ㄨ剼鏈腑鐩存帴浠d锛堣屼笉鏄痭ame锛夊紩鐢ㄨid鏍囪瘑鐨勫璞°備緥濡備笂闈㈢殑input锛岃鍦...
