今天又用到了这几个属性，当初记住了时间长了竟然还用混了。做个demo一次性整明白。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box1{
position: relative;
width: 200px;
height: 200px;
background-color: darkblue;
}
.box2{
width: 100px;
height: 100px;
position: absolute;
background-color: #fff;
border: #ccc solid 1px;
top: 20px;
left: 50px;
overflow: scroll;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">明月出天山，苍茫云海间。长风几万里，吹度玉门关。长风几万里，吹度玉门关。长风几万里，吹度玉门关。溢出后box2上下都会出现滚动条</div>
</div>
</body>
<script type="text/javascript">
var box1=document.getElementsByClassName("box1")[0];
var box2=document.getElementsByClassName("box2")[0];
console.log("box2.offsetParent.className="+box2.offsetParent.className);//offsetParent返回的是box2的定位父元素
console.log("box2.scrollHeight="+box2.scrollHeight);//187,文字堆叠的高度（所有内容的高度）
console.log("box2.offsetTop="+box2.offsetTop);//20,获取对象相对于由offsetParent属性指定的父坐标(css定位的元素或body元素)的高度。
console.log("box2.offsetLeft="+box2.offsetLeft);//50，...................................................的宽度。
console.log("box2.offsetHeight="+box2.offsetHeight);//102,展示在屏幕上的实际高度，与盒子的模型有关
console.log("box2.offsetWidth="+box2.offsetWidth);//102,，展示在屏幕上的实际宽度，与盒子的模型有关
console.log("box2.clientLeft="+box2.clientLeft);//左边框宽度
console.log("box2.clientTop="+box2.clientTop);//上边框宽度
console.log("box2.clientHeight="+box2.clientHeight);//83，实际高度减去底部滚动条高度和边框高度。
console.log("box2.clientWidth="+box2.clientWidth);//83
box2.onscroll=function(){
console.log("box2.scrollTop="+box2.scrollTop);//内容隐藏部分的高度
}
</script>
</html>
2539
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
