如何获取网页中某一元素相对文档的位置

判定一个元素的尺寸和位置的最简单的方法是调用它的getBoundingClientRect()方法。返回一个left、top(坐上角)right、bottom(右下角)，height、width(ie中没有，但可以用right-left、bottom-top得到)，其返回的坐标包含元素的边框和内边距，但不包含元素的外边距。

如果浏览器不支持getBoundingClientRect()，则可以用HTML元素的只读属性offsetWidth、offsetHeight以CSS像素返回它的屏幕尺寸(只包含边框和内边距)

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：indexhtml，编写基础代码。

2、在indexhtml中的<script>标签，输入js代码：

var el = windowdocumentbody;

windowdocumentbodyonmouseover = function(event) {

el = eventtarget;

$('body')append('<br/>当前鼠标在' + $(el)html() + '元素上');

}

3、浏览器运行indexhtml页面，此时鼠标移动到123上，会打印出光标在123元素上。

$("#div_id")height();

// 获得的是该div本身的高度, (不包含padding,margin,border)

$("#div_id")outerHeight();

// 包含该div本身的高度, padding上下的高度, 以及border上下的高度(不包含margin的高度)

$("#div_id")outerHeight(true);

// 包含该div本身的高度, 以及padding,border,margin上下的总高度

$(window)height();

// 获取浏览器显示区域（可视区域）的高度

$(window)width();

// 获取页面的文档高度

$(document)height();

// 浏览器当前窗口文档的高度

$(documentbody)width();

// 浏览器当前窗口文档body的高度

$(document)scrollTop();

// 获取滚动条到顶部的垂直高度 (即网页被卷上去的高度)

objoffset()top

// 某个元素的上边界到body最顶部的距离（在元素的包含元素不含滚动条的情况下）

要获取其他文件下的元素，那么当前页面和另外的页面必须有关联才可以。

比如要从iframe的子页面，获取父页面的元素可以这样写：

parentdocumentgetElementById('a1');

比如要从windowopen的页面中，获取父页面的元素可以这样写：openerdocumentgetElementById("a1");

解释：当元素的滚动条滚动时触发的事件。

onscroll事件貌似任何实体元素都可以绑定，这里的实体元素包括DOM元素、window元素、document元素。

用法即：elementonscroll=function(){};

需要注意的是，滚动条一定要出现，而且滚动条是属于这元素的，例如：

因为外层wrap的高度小于内层inner的高度，所以当设置overflow:auto时会出现滚动条，当拖动滚动条时就会触发wrap的onscroll事件，而不是inner的onscroll事件，即这滚动条属于wrap而不是属于inner，明白这点十分重要，对下面理解的scrollTop、scrollHeight一样道理。

解释：元素滚动条内的顶部隐藏部分的高度。

scrollTop属性只有DOM元素才有，window/document没有。

用法1：获取值 var top = elementscrollTop;//返回数字，单位像素

用法2：设置值 elementscrollTop = 200;

对上面的例子来说，控制滚动条的位置是wrapscrollTop=xx;而不是innerscrollTop，道理同上。

兼容性问题：获得整个文档scrollTop，IE是documentdocumentElementscrollTop，FF/CH则是documentbodyscrollTop

解释：元素滚动条内的内容高度。

scrollHeight同scrollTop属性一样，只有DOM元素才有，window/document没有。

不同的是scrollHeight是只读，不可设置。

兼容性问题：获取整个文档scrollHeight，IE/FF/CH都可以通过documentdocumentElementscrollHeight或documentbodyscrollHeight获得。

此外还有scrollLeft，scrollWidth，道理是一样的。

这3个是全局函数，最新的IE/FF/CH都支持。

windowscroll(x,y)是让window滚动条滚动到那个x,y坐标。//x是水平坐标，y是垂直坐标。

windowscrollBy(-x,-y)是让window滚动条相对滚动到某个坐标，- 10即相对向左/向上滚动10像素。

windowscrollTo(x,y)和windowscroll(x,y)一样。

事件源对象

eventsrcElementtagName(documentgetElementsByTagName)

eventsrcElementtype

捕获释放

eventsrcElementsetCapture();

eventsrcElementreleaseCapture();

事件按键

eventkeyCode

eventshiftKey

eventaltKey

eventctrlKey

事件返回值

eventreturnValue

鼠标位置

eventx

eventy

窗体活动元素

documentactiveElement

绑定事件

documentcaptureEvents(EventKEYDOWN);

访问窗体元素

documentall("txt")focus();

documentall("txt")select();

窗体命令

documentexecCommand

窗体COOKIE

documentcookie

菜单事件

documentoncontextmenu

创建元素

documentcreateElement("SPAN");

根据鼠标获得元素：

documentelementFromPoint(eventx,eventy)tagName=="TD

documentelementFromPoint(eventx,eventy)appendChild(ms)

窗体

documentimages[索引]

窗体事件绑定

documentonmousedown=scrollwindow;

元素

document窗体elements[索引]

对象绑定事件

documentallxxxdetachEvent('onclick',a);

插件数目

navigatorplugins

取变量类型

typeof($js_libpath) == "undefined"

下拉框

下拉框options[索引]

下拉框optionslength

查找对象

documentgetElementsByName("r1");

documentgetElementById(id);

定时

timer=setInterval('scrollwindow()',delay);

clearInterval(timer);

UNCODE编码

escape() ,unescape

父对象

objparentElement(dhtml)

objparentNode(dom)

交换表的行

TableIDmoveRow(2,1)

替换CSS

documentallcssshref = "acss";

并排显示

display:inline

隐藏焦点

hidefocus=true

根据宽度换行

style="word-break:break-all"

自动刷新

<meta >

JS获取/设置iframe内对象元素、文档的几种方法

1、IE专用(通过frames索引形象定位)：

复制代码 代码如下:

documentframes[i]documentgetElementById('元素的ID');

2、IE专用(通过iframe名称形象定位)：

复制代码 代码如下:

documentframes['iframe的name']documentgetElementById('元素的ID');

以上方法，不仅对iframe适用，对frameset里的frame也同样适用。IE虽然擅于自定标准，但不得不说它很多的设计还是比较体现人性化的。比如这个，它在同样支持下面的标准路径之外，提供了一个简洁且形象化的写法。

3、通用方法：

复制代码 代码如下:

documentgetElementById('iframe的ID')contentWindowdocumentgetElementById('元素的ID')

注意要加上contentWindow，往往出现问题都是因为这个容易被忽略，它代表frame和iframe内部的窗口对象。

JS获取iframe文档内容

复制代码 代码如下:

<script type="text/javascript">

function getIframeContent(){ //获取iframe中文档内容

var doc;

if (documentall){ // IE

doc = documentframes["MyIFrame"]document;

}else{ // 标准

doc = documentgetElementById("MyIFrame")contentDocument;

}

return docbodyinnerHTML;

}

</script>

注意：上面的 contentDocument 相当于 contentWindowdocument ！

一、需求与遇到的问题

在网站的后台管理中使用了iframe框架布局，包括顶部菜单、左侧导航和主页面。需求是：点击主页面上的一个按钮，在顶部菜单栏的右侧显示“退出”链接，点击可退出系统。

我的思路是：在顶部的菜单页面放一个不可见的“退出”链接，当用户点击位于iframe中的主页面（mainPagehtm）中的按钮时，在顶部菜单页面的右侧显示“退出”。

我现在遇到的问题是：如何在页面的一个iframe子页面（mainPagehtm）中获取并且 *** 作其它iframe子页面（比如topPagehtm）中的HTML元素？

二、通过JS获取并 *** 作iframe中的元素来解决问题

这里主要就是通过JS来 *** 作Window对象。Window 对象表示浏览器中打开的窗口，如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

经过我在网上查资料，找到了JS *** 作iframe中HTML元素的方法。示例如下。

复制代码 代码如下:

function ShowExit() {

//获取iframe的window对象

var topWin = windowtopdocumentgetElementById("topNav")contentWindow;

//通过获取到的window对象 *** 作HTML元素，这和普通页面一样

topWindocumentgetElementById("exit")stylevisibility = "visible";

}　

说明：第一步，通过windowtopdocumentgetElementById("topNav")方法获取了顶部菜单页面（topPagehtm）所在的iframe对象；第二步，通过上一步获取到的iframe对象的contentWindow属性得到了iframe中元素所在的window对象；第三步，通过上一步获取到的window对象来 *** 作iframe框架中的元素，这和 *** 作不在iframe框架中的普通HTML元素是一样的。

获取页面中元素到文档区域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

以上就是关于如何获取网页中某一元素相对文档的位置全部的内容，包括:如何获取网页中某一元素相对文档的位置、jquery 或者js 怎么获取页面光标所在的元素、jquery—获取元素高度方法 (总结)等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！