一.clientWidth和clientHeight
1.clientWidth：内容+左右内间距
即：clientWidth = width+左右padding
2.clientHeight：内容+上下内间距
即： clientHeigh = height + 上下padding
二.offsetWidth和offsetHeight
1.offsetWidth：内容+内间距+左右边框
即：offsetWidth = width + 左右padding + 左右boder
2.offsetHeight：内容+内间距+上下边框
即：offsetHeith = height + 上下padding + 上下boder
三.scrollWidth、scrollHeight、scrollTop和 scrollLeft
1.scrollWidth：可视区域宽度+被隐藏区域宽度
2.scrollHeight：可视区域高度+被隐藏区域高度
3.scrollTop :内容部分顶部到可视区域顶部的距离
4.scrollLeft:内容层左端 到 可视区域左端的距离
四.举例代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*
{
margin: 0;
padding: 0;
}
.box
{
width: 200px;
height: 200px;
margin: 20px;
padding: 50px;
border: 10px solid palegreen;
overflow-x: hidden;
overflow-y: scroll;
}
.child
{
width: 200px;
height: 500px;
}
</style>
</head>
<body>
<div class="box">
<div class="child">
内容区域
</div>
</div>
<script>
var box = document.querySelector(".box");
//offsetWidth:边框+内间距+内容
console.log(box.offsetWidth);
console.log(box.offsetHeight);
//clientWidth:内间距+内容
console.log(box.clientWidth);
console.log(box.clientHeight);
//style.width:行内样式内容区域的宽
console.log(box.style.width);
console.log(box.style.height);
//scrollHeight:可视区域高度+被隐藏区域高度
console.log(box.scrollWidth);
console.log(box.scrollHeight);
//当前元素相对定位的父元素的偏移距离
console.log(box.offsetTop);
console.log(box.offsetLeft);
//滑动距
console.log(box.scrollLeft);
console.log(box.scrollTop);
console.log(box.scrollHeight - box.clientHeight);
box.onscroll = function () {
console.log(this.scrollTop);
var scTop = this.scrollTop;
if (this.scrollHeight - box.clientHeight - scTop <= 5) {
console.log("触底");
}
}
</script>
</body>
</html>
五.运行结果
1421
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
