offset,client,scroll系列值 & getComputedStyle & getBoundingClientRect
javascript dom 尺寸 前端
线上 demo 地址：https://jsrun.net/h78Kp/edit
<!-- offset,client,scroll系列
以及getComputedStyle getBoundingClientRect方法 -->
<!DOCTYPE html>
<html>
<head>
<title>TestWidthHeight</title>
<style type="text/css">
#outer1 {
position: relative;
width: 100px;
height: 100px;
margin-top: 10px;
margin-left: 20px;
border: 1px solid;
padding-top: 10px;
padding-left: 20px;
}
#inner1 {
width: 20px;
height: 20px;
border: 1px solid;
margin-top: 10px;
margin-left: 20px;
padding-top: 10px;
padding-left: 20px;
}
#outer2 {
position: relative;
width: 100px;
height: 100px;
margin-top: 10px;
margin-left: 20px;
border: 1px solid;
padding-top: 10px;
padding-left: 20px;
overflow: scroll;
}
#inner2 {
width: 20px;
height: 20px;
border: 1px solid;
margin-top: 10px;
margin-left: 20px;
padding-top: 10px;
padding-left: 20px;
}
#inner2-scroll {
width: 300px;
height: 300px;
border: 1px solid;
margin-top: 10px;
margin-left: 20px;
padding-top: 10px;
padding-left: 20px;
}
#outer3 {
position: relative;
margin-top: 10px;
margin-left: 20px;
border: 1px solid;
padding-top: 10px;
padding-left: 20px;
overflow: scroll;
}
</style>
<script type="text/javascript">
//如果outer1 没有设置relative，则会继续向上找定位元素，直到找到body，以其作为父盒子计算offset
let ele = document.getElementById("inner1");
console.log(
"offsetHeight: " + ele.offsetHeight, //32 (offsetHeight = 自身上下border + 自身上下padding + 自身height)
"offsetWidth: " + ele.offsetWidth, //42 (offsetHeight = 自身左右border + 自身左右padding + 自身width)
"offsetTop: " + ele.offsetTop, //20 (offsetTop = 定位父元素padding-top + 自身margin-top)
"offsetLeft: " + ele.offsetLeft //40 (offsetTop = 定位父元素padding-left + 自身margin-left)
);
console.log(
"clientHeight: " + ele.clientHeight, //30 (clientHeight = 自身上下padding + 自身height)
"clientWidth: " + ele.clientWidth, //40 (clientHeight = 自身左右padding + 自身width)
"clientTop: " + ele.clientTop, //1 (clientTop = 自身上边框的宽度，有滚动条会加上滚动条的宽度)
"clientLeft: " + ele.clientLeft //1 (clientLeft = 自身左边框的宽度,有滚动条会加上滚动条的宽度)
);
//当outer2内内容不超出容器时
let outer2 = document.getElementById("outer2");
console.log(
"scrollHeight: " + outer2.scrollHeight, //110 (scrollHeight = 自身上下padding + 自身height)
"scrollWidth: " + outer2.scrollWidth, //120 (scrollWidth = 自身左右padding + 自身width)
"scrollTop: " + outer2.scrollTop, //0
"scrollLeft: " + outer2.scrollLeft //0
);
//当outer2内内容超出容器时
let outer2 = document.getElementById("outer2");
console.log(
"scrollHeight: " + outer2.scrollHeight, //332 (scrollHeight = 元素中内容的实际高度)
"scrollWidth: " + outer2.scrollWidth, //362 (scrollWidth = 元素中内容的实际宽度)
"scrollTop: " + outer2.scrollTop, //元素向上滚动出去的距离
"scrollLeft: " + outer2.scrollLeft //元素向左滚动出去的距离
);
//getComputedStyle & getBoundingClientRect
let outer3 = document.getElementById("outer3");
let computedStyle = window.getComputedStyle(outer3, null);
let boundingStyle = outer3.getBoundingClientRect();
console.log(
"computedWidth: " + computedStyle.width, //242px 不包含自身边框，outer3没给固定宽度，所以撑满父元素
"computedHeight: " + computedStyle.height, //42px 不包含自身边框，outer3没给固定高度，所以靠内容撑开
//boundingBottom - boundingTop 可得出高度，430-376 = 54，比42多出了自身边框:2px 及 margin-top:10px
"boundingTop: " + boundingStyle.top, //376
"boundingBottom: " + boundingStyle.bottom, //430
//boundingRight - boundingLeft 可得出宽度，292-28 = 264，比242多出了自身边框:2px 及 margin-left:20px
"boundingLeft: " + boundingStyle.left, //28
"boundingRight: " + boundingStyle.right //292
);
</script>
</head>
<body>
<div id="outer1">
<div id="inner1"></div>
</div>
<div id="outer2">
<div id="inner2"></div>
</div>
<div id="outer2">
<div id="inner2-scroll"></div>
</div>
<div id="outer3">
<div id="inner2"></div>
</div>
</body>
</html>