offsetWidth: 元素在水平方向上占用的空间大小。包括元素的宽度,内边距，(可见的)垂直滚动条的宽度，左右边框的宽度。
offsetHeight:元素在垂直方向上占用的空间大小，包括元素的高度，内边距，（可见的）水平滚动条的高度，上下边框的高度.
offsetLeft: 元素的左边框至包含元素的左内边框之间的像素距离
offsetTop: 元素的上边框至包含元素的上内边框之间的像素距离
offsetParent: 保存着包含元素的引用
注意：
1.当对象的offsetParent属性指向的是body时，offsetLeft和offsetTop指的是对象的边框（不包括边框）到页面边缘（即包含body的border的宽度，或高度）的距离。在FireFox中，会减去body的边框的宽度。
2.当对象的offsetParent属性指向的是最近的定位祖先元素时，offsetLeft和offsetTop指的是对象的边框（不包括边框）到最近的定位祖先元素的边框（不包括边框）的距离。在IE8中，会将最近的定位祖先元素的边框宽度和高度计算在内。
注意事项可由以下实例验证得：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>测试offsetLeft, offsetTop</title> <style>
* {
margin:0;
padding:0;
}
body {
margin-left:30px;
border:5px solid #000;
background:yellow;
height:350px;
}
.d {
float:left;
position:relative;
margin:20px;
padding:20px;
width:200px;
height:200px;
border:20px solid #000;
background:red;
overflow:auto;
}
.con {
float:left;
width:400px;
height:80px;
margin-left:25px;
border:10px solid blue;
background:green;
}
.zi {
float:left;
margin-top:20px;
width:200px;
height:300px;
}
</style>
<script>
(function(){
window.onload=function(){
var d=document.getElementById("d");
var con=document.getElementById("con");
var bo=document.getElementById("bo");
var zi=document.getElementById('zi');
zi.innerHTML="d.offsetTop="+d.offsetTop+"<br/>"+
"d.offsetLeft="+d.offsetLeft+"<br/>"+
"con.offsetTop="+con.offsetTop+"<br/>"+
"con.offsetLeft="+con.offsetLeft+"<br/>";
}
})();
</script>
</head> <body id="bo">
<div class="d" id="d">
<div class="con" id="con">
<a href="http://cyg7561.blog.163.com/" title="">test</a>
</div>
</div>
<div class="zi" id="zi"> </div>
</body>
</html>
clientWidth: 元素内容区宽度+左右内边距宽度( width + padding-left + padding-right )
clientHeight: 元素内容区高度+上下内边距高度（height + padding-top + padding-bottom）
注意：在window环境下IE中滚动条的宽度，高度为17px，FF ,chrome是21px, 在mac mini环境下，chrome, ff中滚动条的宽度都为15px;
scrollHeight: 主要用于确定元素内容的实际大小，在没有滚动条的情况下，元素内容的总高度
scrollWidth: 主要用于确定元素内容的实际大小，表示在没有滚动条的情况下，元素内容的总宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>鬼眼邪神的博客</title>
<meta name="author" content="鬼眼邪神"/>
<meta name="description" content="鬼眼邪神的博客，http://cyg7561.blog.163.com/"/>
<style>
* {
margin:0;
padding:0;
}
body {
margin-left:30px;
border:5px solid #000;
background:yellow;
height:350px;
}
.d {
float:left;
position:relative;
margin:20px;
padding:20px;
width:200px;
height:200px;
border:20px solid #000;
background:red;
overflow:auto;
} .con {
float:left;
width:400px;
height:80px;
margin-left:25px;
border:1px solid blue;
background:green;
}
.zi {
float:left;
margin-top:20px;
width:200px;
height:300px;
}
</style>
<script>
(function(){
window.onload=function(){
// var d=document.getElementById("d");
// var con=document.getElementById("con");
// var bo=document.getElementById("bo");
var zi=document.getElementById('zi');
zi.innerHTML=
"d.clientWidth="+document.documentElement.clientWidth+"<br/>"+
"d.clientHeight="+document.documentElement.clientHeight+"<br/>"+
"d.scrollWidth="+document.documentElement.scrollWidth+"<br/>"+
"d.scrollHeight="+document.documentElement.scrollHeight+"<br/>";
;
} })();
</script>
</head> <body id="bo">
<div class="d" id="d">
<div class="con" id="con">
<a href="http://cyg7561.blog.163.com/" title="鬼眼邪神的博客">鬼眼邪神的博客</a>
</div>
</div>
<div class="zi" id="zi"> </div> <p style="border: 2px solid #ddd; width: 100px">测试</p>
</body>
</html>
以上代码是我用来测试当不包含滚动条的页面中取得页面clientHeight,clientWidth,scrollWidth, scrollHeight时，在各个浏览器中值得差异，根据测试所得，
在IE8，9，11,FF上clientWidth,clientHeight和scrollWidth,scrollHeight是相同的，大小都是代表文档内容区域的大小，而非适口的尺寸
但是在chrome中 scrollWidth,scrollHeight是等于视口大小，clientWidth,clientHeight等于文档内容区域的大小
而这一结论是和《高级程序设计》P324上的结论是相悖的，所以还是值得以后继续探究...
所以在跨浏览器的环境下面得到文档内容区域的大小，是必须要取得scrollWidth/clientWidth和scrollHeight/clientHeight中的最大值，即：
var docHeight = Math.max( document.documentElement.scrollHeight, document.documentElement.clientHeight);
var docWidht = Math.max( document.documentElement.scrollWidth, document.documentElement.clientWidth);
scrollTop: 被隐藏在内容区域上方的像素数，通过设置这个属性可以改变元素的滚动位置
scrollLeft: 被隐藏在内容区域左侧的像素数，通过设置这个属性可以改变元素的滚动位置
确定元素大小
getBoundingClientRect(): 返回包含4个属性：left, top, right, bottom的矩形对象。这些属性表示元素在页面中相对于视口的位置
/*
* 跨浏览器兼容getBoundingClientRect()方法
* ie8人为文档的左上角坐标是（2，2），其他浏览器包括IE9则将传统的（0，0）作为起点坐标
* 因此需要一开始检测下位于（0，0）出得元素位置
* 此方法用到arguments.callee，所以这个方法不能在严格模式下使用
*/
function getBoundingClientRect( elem ){ // 这个函数使用自身它自身的属性来确定是否要的坐标进行调整
if( typeof arguments.callee.offset != "number" ){
var scrollTop = document.documentElement.scrollTop;
var temp = document.createElement("div");
temp.style.cssText = "position: absolute; left: 0; top: 0";
document.body.append( temp );
// 之所以要减去视口的scrollTop,是为了防止调用这个函数时窗口被滚动
arguments.callee.offset = -temp.getBoundingClientRect().top -scrollTop;
document.body.removeChild( temp );
temp = null;
} var rect = element.getBoundingClientRect();
var offset = arguments.callee.offset; return{
left: rect.left + offset,
right: rect.right + offset,
top: rect.top + offset,
bottom: rect.bottom + offset
}
}
这个方法兼容IE, Firefox 3+, Safari 4+, Opera 9.5及Chrome;
Event对象定位相关的属性：
客户区坐标位置
event.clientX: 表示事件发生时鼠标指针在视口中的水平坐标，这个值不包括页面滚动的距离
event.clientY: 表示时间发生时鼠标指针在视口中的垂直坐标，这个值不包括页面滚动的距离
所有浏览器都支持这两个属性。
页面坐标位置：
event.pageX: 表示鼠标光标在页面中的位置，因此坐标是从页面本身而非视口的左边计算的
event.pageY: 表示鼠标光标在页面中的位置，因此坐标是从页面本身而非视口的顶端计算的
IE8及更早版本不支持事件对象上的页面坐标，不过使用客户区坐标和滚动信息可以计算出来。
var div = document.getElementById("mydiv");
addHandler( div, "click", function( event ){
event = event || window.event;
var pageX = event.pageX;
var pageY = event.pageY;
if( pageX === undefined ){
// document.body(混杂模式)||document.documentElement(标准模式)
pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
};
if( pageY === undefined ){
// document.body(混杂模式)||document.documentElement(标准模式)
pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
};
});
屏幕坐标位置：
event.screenX: 表示鼠标事件发生时，鼠标指针相对于整个电脑屏幕的横坐标的信息
event.screenY: 表示鼠标事件发生时，鼠标指针相对于整个电脑屏幕的横坐标的信息