offsetParent：改属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），已进行过CSS定位的容器元素。如果这个容器元素未进行CSS定位，则offsetParent属性的取值为body元素的引用。当容器元素的style.display 被设置为“none”是（译注：IE和Opear除外），offsetParent属性返回null。
<html>
<head></head>
<style>
* {
margin: 0;
padding: 0;
}
.header {
height: 400px;
}
.main {
width: 500px;
height: 600px;
background: #FF0;
margin: 0 auto;
border: 10px solid #0f0;
position: absolute;
}
</style>
<body>
<div class="header">
</div>
<div class="main">
<div class="content"></div>
</div>
<script>
let content = document.getElementsByClassName('content')[0]
// 注：此时offsetParent指向main
// 若删除main中position属性，offsetParent指向body
console.log(content.offsetParent)
</script>
</body>
</html>
top：该属性一般对用过CSS定位的元素有效（position为“static”时为auto，不产生效果），定义了一个top属性有效的元素（即定位元素）的上外边距边界与其包含块上边界之间的偏移
clientTop：元素上边框的厚度，党没有指定边框厚度时，一般为0；
.content {
border: 10px solid #999;
width: 100px;
height: 100px;
}
console.log(content.clientTop) // output: 10
scrollTop: 位于对象最顶端和窗口中可见内容的最顶端之间的距离，简单说就是滚动后被隐藏的高度。
// 设置posititon(static除外)后，则相对main定位，此时输出0
// 不设置position属性，此时输出110(包含外层main的边框)
console.log(content.offsetTop)
clientHeight：该属性表示内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度。
.content {
border: 10px solid #999;
width: 100px;
height: 100px;
padding: 10px;
}
// clientHeight = padding + height
// output: 120
console.log(content.clientHeight)
scrollHeight：IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。
offsetHeight：获取对象相对于由offsetParent属性指定的父坐标(css定位的元素或body元素)的高度。IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。offsetHeight在新版本的FF和IE中是一样的，表示网页的高度，与滚动条无关，chrome中不包括滚动条。
// offsetHeight = padding + border + height
// output: 140
console.log(content.offsetHeight)
clientX、clientY：相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性。
pageX、pageY：类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。
offsetX、offsetY：相对于事件源元素（target或srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。
screenX、screenY：相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性
getBoundingClientRect：用来获取元素的位置
语法：rectObject = object.getBoundingClientRect();
返回值：TextRectangle对象，每个矩形具有四个整数性质（ 上， 右 ， 下，和左 ）表示的坐标的矩形，以像素为单位。
rectObject.top：元素上边到视窗上边的距离
rectObject.right：元素右边到视窗左边的距离
rectObject.bottom：元素下边到视窗上边的距离
rectObject.left：元素左边到视窗左边的距离
注意：在IE中，默认坐标从(2,2)开始计算，导致最终距离比其他浏览器多出两个像素。
最后附上所有代码：仅供参考
<html>
<head></head>
<style>
* {
margin: 0;
padding: 0;
}
.header {
height: 400px;
}
.main {
width: 500px;
height: 600px;
background: #FF0;
margin: 0 auto;
border: 10px solid #0f0;
/* position: absolute; */
}
.content {
border: 10px solid #999;
width: 100px;
height: 100px;
padding: 10px;
}
</style>
<body>
<div class="header">
</div>
<div class="main">
<div class="content"></div>
</div>
<script>
let content = document.getElementsByClassName('content')[0]
let main = document.getElementsByClassName('main')[0]
// 注：此时offsetParent指向main
// 若删除main中position属性，offsetParent指向body
console.log(content.offsetParent)
console.log(content.clientTop) // output: 10
// 设置posititon(static除外)后，则相对main定位，此时输出0
// 不设置position属性，此时输出110(包含外层main的边框)
console.log(content.offsetTop)
console.log(content.clientHeight)
// clientHeight = padding + height
// output: 120
console.log(content.clientHeight)
// offsetHeight = padding + border + height
// output: 140
console.log(content.offsetHeight)
</script>
</body>
</html>
网友评论