JavaScript通过ID获取元素坐标

JavaScript通过ID获取元素坐标

function getElementPos(elementId) {

var ua = navigator.userAgent.toLowerCase();

var isOpera = (ua.indexOf(‘opera‘) != -1);

var isIE = (ua.indexOf(‘msie‘) != -1 && !isOpera); // not opera spoof

var el = document.getElementByIdx_x_x(elementId);

if(el.parentNode === null || el.style.display == ‘none‘) {

return false;

}

var parent = null;

var pos = [];

var box;

if(el.getBoundingClientRect)    //IE

{

box = el.getBoundingClientRect();

var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);

var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);

return {x:box.left + scrollLeft, y:box.top + scrollTop};

}else if(document.getBoxObjectFor)    // gecko

{

box = document.getBoxObjectFor(el);

var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0;

var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0;

pos = [box.x - borderLeft, box.y - borderTop];

} else    // safari & opera

{

pos = [el.offsetLeft, el.offsetTop];

parent = el.offsetParent;

if (parent != el) {

while (parent) {

pos[0] += parent.offsetLeft;

pos[1] += parent.offsetTop;

parent = parent.offsetParent;

}

}

if (ua.indexOf(‘opera‘) != -1 || ( ua.indexOf(‘safari‘) != -1 && el.style.position == ‘absolute‘ )) {

pos[0] -= document.body.offsetLeft;

pos[1] -= document.body.offsetTop;

}

}

if (el.parentNode) {

parent = el.parentNode;

} else {

parent = null;

}

while (parent && parent.tagName != ‘BODY‘ && parent.tagName != ‘HTML‘) { // account for any scrolled ancestors

pos[0] -= parent.scrollLeft;

pos[1] -= parent.scrollTop;

if (parent.parentNode) {

parent = parent.parentNode;

} else {

parent = null;

}

}

return {x:pos[0], y:pos[1]};

}

//sample

var pos=getElementPos("divId");

alert("距左边距离"+ pos.x +",距上边距离"+pos.y);

时间: 2024-10-29 19:11:14

JavaScript通过ID获取元素坐标的相关文章

Jquery获取元素坐标

获取页面某一元素的绝对X,Y坐标,相对于浏览器窗体,可以用offset()方法: var X = $('#DivID').offset().top; var Y = $('#DivID').offset().left; 获取相对(父元素)位置: var X = $('#DivID').position().top; var Y = $('#DivID').position().left; 例如: var offset = $("#fontsize").position();$(&quo

js中用tagname和id获取元素的3种方法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3种用tagname和id获取元素的方法</title> <style> body{     margin: 0; } ul{     margin: 0;     padding: 0;     list-style: none; } h1{

JavaScript的DOM_获取元素方法_getElementById()获取特定ID元素的节点

一.通过标签的id属性值获取该标签节点 接受一个参数:如果找到相应的元素则返回该元素的 HTMLDivElement 对象,如果不存在,则返回 null. <script type="text/javascript"> window.onload = function(){ var box = document.getElementById('box'); //获取 id 为 box 的元素节点 alert(box.id); } </script> </h

JavaScript的DOM_获取元素周边大小

一.clientLeft 和 clientTop 这组属性可以获取元素设置了左边框和上边框的大小,目前只提供了 Left 和 Top 这组,并没有提供 Right 和 Bottom. <script type="text/javascript"> window.onload = function(){ var box = document.getElementById("box"); alert(box.clientLeft); alert(box.cl

通过ID获取元素

网页由标签将信息组织起来,而标签的id属性值是唯一的,就像是每人有一个身份证号一样,只要通过身份证号就可以找到相对应的人.那么在网页中,我们通过id先找到标签,然后进行操作. 语法: document.getElementById("id") 注:获取的元素是一个对象,如想对元素进行操作,我们要通过它的属性或方法.例如: 运行结果为: 理解:输出为null,是因为代码是顺序执行的,先调用了JavaScript代码,但是这个时候还没有ID为"con"的元素,得到空 理

JavaScript的DOM_获取元素方法

W3C 提供了比较方便简单的定位节点的方法和属性,以便我们快速的对节点进行操作. 分别为:getElementById().getElementsByTagName().getElementsByName().getAttribute().setAttribute()和 removeAttribute(). 1.getElementById()方法: 接受一个参数:通过标签的id属性值获取该标签节点.如果找到相应的元素则返回该元素的 HTMLDivElement 对象,如果不存在,则返回 nul

JavaScript之怎样获取元素节点

JavaScript获取元素节点一共有三种方法,分别是通过元素ID.通过标签名字和通过类名字来获取: 1.通过元素ID属性的ID值来获得元素对象-getElementById() DOM提供了一个名为getElementById()的方法,这个方法将返回一个与括号里有着一样id值的元素节点对应的对象.他是document对象特有的函数,这个函数的参数只有一个,只能是你想要获得的元素的ID值,这个值必须放在单引号或者双引号里面. 注意:JavaScript语言区分字母大小写,所以在写getElem

js 获取元素坐标 和鼠标点击坐标

js 获取元素的位置 var odiv=document.getElementById('divid'); alert(odiv.getBoundingClientRect().left); alert(odiv.getBoundingClientRect().top); js 获取点击时间鼠标坐标 event = event||window.event; //获得相对于body定位的横标值: x=event.clientX //获得相对于body定位的纵标值: y=event.clientY

JavaScript通过id获取不到元素是什么原因阿?

s代码 JavaScript code ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function show_more_mess() {     $("#background_div").css("width","100%");//获取这个div的时候是没有问题的     $("#background_div").css("height","100%&quo