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

首先你要先搞清你所说的坐标变化不大是相对窗口，屏幕，还是文档的，他们的坐标系是不同的。不知你想要找的是哪一个。

1相对窗口，当然是以浏览器窗口为主了，即浏览器中可见部分（即包含文档部分）的左上角为坐标原点。这是用clientX和clientY获取的。

2相对屏幕，当然是以你的显示器为主了，显示器的左上角为原点，用screenX和screenY可以获取到

3相对文档的，即以文档BODY所显示的左上角为原点，例如当一个DIV的position="absolute"时设left="100px"

top="100px"那么无论你如何变换浏览器，虽然它显示的位置在变但他在文档中的位置是不变的。一般用documentbodyscrollLeft+eventclientX和documentbodyscrollTop+eventclientY来获取

而offsetX解释说是事件产生的位置和鼠标位置的偏移量，没太理解，我也是初学。

而你说改变分辨率坐标改变，这是必然的。因为在不同的分辨率下网页的显示样式不同，这不是坐标改变的主要原因，主要还是因为度量的改变，如：无论屏幕的分辨率怎么改屏幕大小是不变的，但它代表的显示逻辑长度改变了，如1024×768和800×600，同样宽度的屏幕被当成1024个长度单位来用和当成800个长度单位来用当然会不同，当你点击屏幕的中央时前者返回的是1024/2而后者返回的是800/2所以坐标值会改变。就像你用米尺量是1米，用寸尺量是3寸，一个是1，一个是3一样的道理。

是指Script生成的iframe吧？理论上，iframe内的页面和parent页只有上下级关系，所以鼠标在iframe内的坐标应该不能在父页获取。你可以用documentgetElementById("iframe1")contentDocument得到iframe的document对象，之后 *** 作它得到iframe内的坐标，再与父页中iframe标签左上角坐标叠加就可以。

有两种方法

1 用组件的title属性, 这个是HTML中自带的提示属性, 当鼠标停留在组件上的时候, 就会d出提示, 比如<div title="小明">name</div>, 当鼠标停留在div上的时候, 就会有一个小黄框, 显示"小明"

2上面的提示框很不好看, 而且功能很固定, 所以你可以在组建上加一个onmouseover的事件, 记录鼠标的位置, 我写了一个例子, 你看看是不是你需要的:

<script>

var mouseX;

var mouseY;

function showName() {

var infoDiv = documentgetElementById('infoDiv');

infoDivinnerHTML = 'This is the name!';

infoDivstyleleft = mouseX;

infoDivstyletop = mouseY;

infoDivstyledisplay = "block";

}

function mouseOver(obj) {

// 此处记录鼠标停留在组建上的时候的位置, 可以自己通过加减常量来控制离鼠标的距离

mouseX = eventclientX;

mouseY = eventclientY;

}

</script>

<div onclick="showName()" onmouseover="mouseOver()" >Click here to display name</div>

<!-- 用来显示名字的DIV, 根据需要可以修改格式和布局 -->

<div id="infoDiv" style="display: none; position: absolute; width: 100px; height: 50px; background-color: #F1F19B;"></div>

获取浏览器宽高是：

winWidth=documentbodyclientWidth||documentdocumentElementclientWidth

winHeight=documentbodyclientHeight||documentdocumentElementclientHeight

那么中心点应该就是取1/2

Var center={centerW:winWidth/2,centerH:winHeight/2};

以上就是关于js获取元素到文档区域document的坐标方法全部的内容，包括:js获取元素到文档区域document的坐标方法、js 获取鼠标坐标的问题、JS获取鼠标点击位置坐标等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！