javascript 精确获取页面元素的位置

复制代码 代码如下:

//取得元素x坐标
function pageX(elem) {
return elem.offsetParent?(elem.offsetLeft+pageX(elem.offsetParent)):elem.offsetLeft;
}
//取得元素y坐标
function pageY(elem) {
return elem.offsetParent?(elem.offsetTop+pageY(elem.offsetParent)):elem.offsetTop;
}

貌似这位大神在出这本书时比较赶,有许多纰漏,最后大神也发觉这两个函数有问题,并没有把它们运用到JQuery中。由于是用累加的方式去计算,只要一个元素出现问题,就有可能层层被大,因此我在精确获取样式属性时就摒弃这种方法。主要误算参照大神的结论
Handling table border offsets.
Fixed positioned elements.
Scroll offsets within another element.
Borders of overflowed parent elements.
Miscalculation of absolutely positioned elements.


随着新锐浏览器都支持IE的getBoundingClientRect方法,我们得以用更简单更快捷更安全的方法来定位页面元素。getBoundingClientRect返回的是一个集合,分别为元素在浏览器可视区的四个角的坐标。

不过它在IE的标准模式存在一个奇怪的问题,html元素是有border的,默认是2px,并且是不可修改的;怪癖模式是没有的。详见http://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx

This method retrieves an object that exposes the left, top, right, and bottom coordinates of the union of rectangles relative to the client's upper-left corner. In Microsoft Internet Explorer 5, the window's upper-left is at 2,2 (pixels) with respect to the true client.

我们做一些测试(请分别在IE6与IE8中进行):

1、标准模式,没有重设html的border

html, body{
/* border: 0; */
}

var isQuirk = (document.documentMode) ? (document.documentMode==5) ? true : false : ((document.compatMode=="CSS1Compat") ? false : true);
var getCoords = function(el){
var box = el.getBoundingClientRect(),
top = box.top,
left = box.left
return { top: top, left: left };
};
var text = function(){
var r = getCoords(document.documentElement)
alert( r.top+","+r.left);
alert( document.documentElement.clientLeft)
if(isQuirk){
alert("怪癖模式");
}else{
alert("标准模式");
}
}

getBoundingClientRect

运行代码

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

2、标准模式,重设html的border

html, body{
border: 0;
}

var isQuirk = (document.documentMode) ? (document.documentMode==5) ? true : false : ((document.compatMode=="CSS1Compat") ? false : true);
var getCoords = function(el){
var box = el.getBoundingClientRect(),
top = box.top,
left = box.left
return { top: top, left: left };
};
var text = function(){
var r = getCoords(document.documentElement)
alert( r.top+","+r.left);
alert( document.documentElement.clientLeft)
if(isQuirk){
alert("怪癖模式");
}else{
alert("标准模式");
}
}

getBoundingClientRect

运行代码

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

3、怪癖模式,没有重设html的border

html, body{
/* border: 0; */
}

var isQuirk = (document.documentMode) ? (document.documentMode==5) ? true : false : ((document.compatMode=="CSS1Compat") ? false : true);
var getCoords = function(el){
var box = el.getBoundingClientRect(),
top = box.top,
left = box.left
return { top: top, left: left };
};
var text = function(){
var r = getCoords(document.documentElement)
alert( r.top+","+r.left);
alert( document.documentElement.clientLeft)
if(isQuirk){
alert("怪癖模式");
}else{
alert("标准模式");
}
}

getBoundingClientRect

运行代码

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

4、怪癖模式,重设html的border

html, body{
border: 0;
}

var isQuirk = document.documentMode ? document.documentMode == 5 : document.compatMode && document.compatMode != "CSS1Compat";
var getCoords = function(el){
var box = el.getBoundingClientRect(),
top = box.top,
left = box.left
return { top: top, left: left };
};
var text = function(){
var r = getCoords(document.documentElement)
alert( r.top+","+r.left);
alert( document.documentElement.clientLeft)
if(isQuirk){
alert("怪癖模式");
}else{
alert("标准模式");
}
}

getBoundingClientRect

运行代码

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

John Resig给出的方案就是用clientTop,clientLeft作减值。以下函数就是从JQuery中抠出来,就后就用它获取页面元素的坐标,比offset大法安全多了。


复制代码 代码如下:

var getCoords = function(el){
var box = el.getBoundingClientRect(),
doc = el.ownerDocument,
body = doc.body,
html = doc.documentElement,
clientTop = html.clientTop || body.clientTop || 0,
clientLeft = html.clientLeft || body.clientLeft || 0,
top = box.top + (self.pageYOffset || html.scrollTop || body.scrollTop ) - clientTop,
left = box.left + (self.pageXOffset || html.scrollLeft || body.scrollLeft) - clientLeft
return { 'top': top, 'left': left };
};

其中self.pageYOffset相当于window.self.pageYOffset,是火狐的一个属性,相当于document.body.scrollTop。以下是它的定义:
Definition: The pageYOffset property is used to determine the Y coordinate of the scroll position in some browsers. This is not a reserved word so you can declare your own variable or function called pageYOffset but if you do then you will not be able to find or alter the scroll position of a window in some browsers

时间: 2009-12-31

js中的如何定位固定层的位置

需要获取一些HTML的对象的坐标来更灵活的设置目标层的坐标,这里可以通过用到document.body.scrollTop等属性,但是这些属性在xhtml的标准网页中或更简单的说就是带<!DOCTYPE...>的标签中得到的值是0:如果不要此标签则一切正常,那么在xhtml中如何获取body的坐标呢?当然有办法了,我们使用document.documentElement来取代document.body例如可以这样写: 复制代码 代码如下: var top=document.documentEl

JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)

js与jquery获得页面大小.滚动条位置.元素位置 复制代码 代码如下: //页面位置及窗口大小 function GetPageSize() {var scrW, scrH; if(window.innerHeight && window.scrollMaxY) {    // Mozilla    scrW = window.innerWidth + window.scrollMaxX;    scrH = window.innerHeight + window.scrollMaxY

js,jquery滚动/跳转页面到指定位置的实现思路

要解决两个需求: 一个是从A页面跳到B页面,滚动到页面的任何地方: 第二个是在B页面内部点击某个元素,滚动到页面的任何地方: 怎么解决啊?很简单,当然是用锚点. 首先在A页面创建一个锚点 <body> <a href="b.html#pos" target="_blank">点击跳转</a> <body> 然后在B页面定义这个锚点 <body> ... 这里是很多文字,把页面撑开,撑出滚动条 ... <

js DIV滚动条随机位置的设置技巧

style后面用于限定DIV样式并加滚动条,这个不多说 关键的地方其实很简单,最后两行Javascript就是了,起作用的只有最后一行: obj.scrollTop=obj.scrollHeight*(Math.random()); obj.scrollTop:滚动条距离顶部的位置 obj.scrollHeight:流动区域的高度 Math.random():获得一个随机数 很简单,有人可能需要,用就拿去,哈哈 PS:IE6 / IE7 / FF2 测试通过 IE7在本地测试时只是每次打开时滚动

JS实现自动固定顶部的悬浮菜单栏效果

本文实例讲述了JS实现自动固定顶部的悬浮菜单栏效果.分享给大家供大家参考.具体如下: 这是一款自动固定顶部的悬浮菜单栏代码,不管你如何拉动滚动条,它会始终显示在网页的最顶部,用作网站的顶级导航或公告之类的比较合适吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-fix-top-float-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T

JS简单实现DIV相对于浏览器固定位置不变的方法

本文实例讲述了JS简单实现DIV相对于浏览器固定位置不变的方法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <html> <head> <title>Anchor Properties</title> <meta http-equiv="Content-Type" content=&q

javascript 获取页面的高度及滚动条的位置的代码

复制代码 代码如下: var Viewport={ top : function(){ return window.pageYOffset || document.documentElement && document.documentElement.scrollTop || document.body.scrollTop; }, height : function(){ return window.innerHeight || document.documentElement &

js固定DIV高度,超出部分自动添加滚动条的简单方法

复制代码 代码如下: function setheight()     {     var div=document.getElementById("event_basicInfo");     //div.style.width="40%";     div.style.height=400;     div.style.overflow="auto";     }     window.onload=setheight;

js实现简单的左右两边固定广告效果实例

本文实例讲述了js实现简单的左右两边固定广告效果的方法.分享给大家供大家参考.具体分析如下: 大多数网站都有左右两边的固定广告位,下面呢就是实现这个效果的最简单的代码,可能在ie下滚动的时候会有一点抖动,这个问题以后再解决了,先实现再说. 要点一: var adtop = adleft.offsetTop; 获得元素距离上边的位置,在滚动的时候需要用到. 要点二: 复制代码 代码如下: adleft.style.top=adtop+(document.documentElement.scroll

js 固定悬浮效果实现思路代码

复制代码 代码如下: <script type="text/javascript"> (function($){ var ele_fix = $("#div_right"); //浮动窗口 var _main = $(".main"); //浮动区域 var ele_offset_top = ele_fix.offset().top; //浮动区域高度 $(window).scroll(function(){ var scro_top

JS实现固定在右下角可展开收缩DIV层的方法

本文实例讲述了JS实现固定在右下角可展开收缩DIV层的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

js+CSS实现弹出居中背景半透明div层的方法

本文实例讲述了js+CSS实现弹出居中背景半透明div层的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

JS点击链接后慢慢展开隐藏着图片的方法

本文实例讲述了JS点击链接后慢慢展开隐藏着图片的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>JS点击链接后,慢慢展开隐藏着的图片</title> <body> <script language="JavaScript"> var b=0; var c=true; function fade(){ if(document.all); if(c == true){b+=3} i

JS+CSS实现感应鼠标渐变显示DIV层的方法

本文实例讲述了JS+CSS实现感应鼠标渐变显示DIV层的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/

JS实现5秒钟自动封锁div层的方法

本文实例讲述了JS实现5秒钟自动封锁div层的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JS实现5秒钟自动封锁div层</title> <style type="text/css"> <!-- #sponsorAdDiv {position:absolute; height:1; width:1; top:0; left:0;} --> <

JS实现读取xml内容并输出到div中的方法示例

本文实例讲述了JS实现读取xml内容并输出到div中的方法.分享给大家供大家参考,具体如下: note.xml文件结构: <nooo> <note> <to>George</to> <from>John</from> <heading>Reminder</heading> <body>Don't forget the meeting!</body> </note> <n

CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法

本文实例讲述了CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法.分享给大家供大家参考.具体分析如下: 这里用CSS+JS实现点击文字后动画展开一个DIV层菜单,到期会自动关闭,是CSS结合JS实现的效果. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

JS实现定时自动关闭DIV层提示框的方法

本文实例讲述了JS实现定时自动关闭DIV层提示框的方法.分享给大家供大家参考.具体分析如下: 这里用JS设定时间去控制指定ID的DIV层是否显示,可以实现一个自动关闭的提示框,时间一到,马上关闭,这样会使你的网页更人性一点,代码其实比你想像的还要简单,就一行代码. <title>自动关闭的DIV层</title> <body onLoad=setTimeout("abc.style.display='none'",5000)> <div id=

基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动

1.准备一张二维码图片,大小.图片自己定义我这里用的宽度和高度都是253,名称weixin.jpg <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g

JS+CSS实现DIV层的展开、收缩效果

本文为大家分享的第一个实例:JS控制DIV层的展开.收缩效果. <html> <head> <title>CSS+JS实现一个DIV层的展开/折叠效果</title> <style> * { margin:0; padding:0;} body { text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif;} h1 { font:125% Arial, Helvetica,