1.获取元素的位置this.getBoundingClientRect()
http://www.cnblogs.com/purplefox2008/archive/2010/09/06/1818873.html
Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
</head>
<body style="width:2000px; height:1000px;">
<div id="demo" style="position:absolute; left:518px; right:100px; width:500px; height:500px; background:#CC0000; top: 114px;">Demo为了方便就直接用绝对定位的元素</div>
</body>
</html>
<script>
document.getElementById('demo').onclick=function (){
if (document.documentElement.getBoundingClientRect) {
alert("left:"+this.getBoundingClientRect().left)
alert("top:"+this.getBoundingClientRect().top)
alert("right:"+this.getBoundingClientRect().right)
alert("bottom:"+this.getBoundingClientRect().bottom)
var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y = this.getBoundingClientRect().top+document.documentElement.scrollTop;
alert("Demo的位置是X:"+X+";Y:"+Y)
}
}
</script>
2.要获取当前页面的滚动条纵坐标位置
获取鼠标位置
event.clientX+document.body.scrollLeft，event.clientY+document.body.scrollTop
if (document.body && document.body.scrollTop && document.body.scrollLeft){
top = document.body.scrollTop;left = document.body.scrollleft;
}if (document.documentElement && document.documentElement.scrollTop && document.documentElement.scrollLeft){
top = document.documentElement.scrollTop;left = document.documentElement.scrollLeft;
}
****1.浏览器窗口尺寸
有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
兼容性代码
var w=window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;
var h=window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;
****2.滚动条的位置
window.pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。
window.pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
所有主流浏览器都支持 pageXOffset 和 pageYOffset 属性。
注意： IE 8 及 更早 IE 版本不支持该属性,但可以使用 "document.body.scrollLeft" 和 "document.body.scrollTop" 属性 。
getTopHeight: function () {
return {
//滚动条高度
pTop: window.pageYOffset || document.documentElement.scrollTop,
//窗口的高度
pHeight: window.innerHeight || document.documentElement.clientHeight
}
},
****3.距离浏览器窗口相对于电脑屏幕的位置
使用下列代码可以跨浏览器取得窗口左边和上边的位置：
所有主要浏览器都支持screenLeft和screenTop属性，Firefox除外。
注意： Firefox 浏览器请使用 "window.screenX" and "window.screenY"。
var leftPos=(typeof window. screenLeft=="number”) ;
window. screenLeft :window. screenX;
var topPos= (typeof window.screenTop=="number”) ;
window. screenTop:window. screenY;
以上有些兼容性的问题
主要有document.documentElement和document.body的区别
//div跟随滚动条滚动
<div id="div" style="width:100px;height:100px;background:#ccc;position:absolute;"></div>
window.onscroll = function ()
{
var div = document.getElementById("div");
div.style.top = document.body.scrollTop + "px";
}
运行后没有达到预期效果，输出 document.body.scrollTop 的值一看，一直都是 0。一翻折腾，原来是 DTD 的问题，要是页面直接用 <html> 开头的话就没有问题了。但是要符合 web 标准，DTD 当然是不能少的。
如果有 DTD 时用，那就用 document.documentElement.scrollTop 代替 document.body.scrollTop 就可以了。
window.onscroll = function ()
{
var oFix = document.getElementById("divfix");
oFix.style.top = document.documentElement.scrollTop + "px";
}
body是DOM对象里的body子节点，即 <body> 标签；
documentElement 是整个节点树的根节点root，即<html> 标签；
元素位置
1.offsetWidth、offsetHeight
offsetWidth=(border-width)*2+(padding-left)+(width)+(padding-right)
offsetHeight=(border-width)*2+(padding-top)+(height)+(padding-bottom)
