clientWidth：获取对象的内容可视区域的宽度，即clientWidth=width+padding，不包括滚动条。
clientHeight：获取对象的内容可视区域的高度，即clientHeight=height+padding，不包括滚动条。
scrollWidth：获取对象内容的实际宽度，即对象的滚动宽度。
scrollHeight：获取对象内容的实际高度，即对象的滚动高度。
offsetWidth：获取对象的宽度，即offsetWidth=width+padding+scrollbar（滚动条）+border。也可以写成offsetWidth=clientWidth+scrollbar（滚动条）+border。
offsetHeight：获取对象的宽度，即offsetHeight=height+padding+scrollbar（滚动条）+border。也可以写成offsetHeight=clientHeight+scrollbar（滚动条）+border。
clientTop：获取对象的上边框的宽度。
clientLeft：获取对象的左边框的宽度。
scrollTop：设置或获取对象最顶端和对象内容的最顶端之间的距离。
scrollLeft：设置或获取对象最左端和对象内容的最左端之间的距离。
offsetTop：获取对象相对于版面或由offsetParent属性指定的父坐标的顶部位置。
offsetLeft：获取对象相对于版面或由offsetParent属性指定的父坐标的左侧位置。
offsetParent：指的是最近的定位祖先元素。如果没有祖先元素是定位的话，会指向body元素。
td的offsetParent是TABLE，不管table是否有定位属性。td里面的元素的offsetParent为第一个定位的parents元素，如果没有定位元素呢，分为三种：
如果该元素没有定位时:TD如果该元素有定位，table都没有定位的话，IE6中＝HTML,FF,IE8=BODY如果该元素和table都定位的话：TABLE
在IE6和IE7中对offsetParent解释有个小bug，当祖先元素都不是定位元素且本身是定位元素的时候返回document.documentElement，其他情况返回document.body!!
offsetTop、offsetLeft
（1）当对象的offsetParent属性指向的是body时，offsetLeft和offsetTop指的是对象的边框（不包括边框）到页面边缘的距离。在FireFox中，会减去body的边框的宽度。
（2）当对象的offsetParent属性指向的是最近的定位祖先元素时，offsetLeft和offsetTop指的是对象的边框（不包括边框）到最近的定位祖先元素的边框（不包括边框）的距离。在IE中，会将最近的定位祖先元素的边框宽度算在内。
示例代码：
<!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: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.clientWidth="+d.clientWidth+
"<br/>"+
"d.clientHeight="+d.clientHeight+
"<br/>"+
"d.scrollWidth="+d.scrollWidth+
"<br/>"+
"d.scrollHeight="+d.scrollHeight+
"<br/>"+
"d.offsetWidth="+d.offsetWidth+
"<br/>"+
"d.offsetHeight="+d.offsetHeight+
"<br/>"+
"d.clientTop="+d.clientTop+
"<br/>"+
"d.clientLeft="+d.clientLeft+
"<br/>"+
"d.scrollTop="+d.scrollTop+
"<br/>"+
"d.scrollLeft="+d.scrollLeft+
"<br/>"+
"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=
"鬼眼邪神的博客">鬼眼邪神的博客</a>
</div>
</div>
<div
class=
"zi" id=
"zi">
</div>
</body>
</html>
在Chrome中的显示效果：
转载于:https://www.cnblogs.com/wangtian0711/p/7027853.html
