知识点:
element.clienHeight 返回元素的可见高度
element.clienWidth 返回元素的可见宽度
这些属性返回值是一个数字,是不在px的,会获取元素的宽度或高度,包括内容区和内边距,这些属性事只读的
elenent.offsetHeight返回元素的高度
element.offsetWidth 返回元素的宽度
获取元素的整个宽度和高度,包括内容区、内边距、边框
element.offsetParent 获取当前元素的定位父元素
会获取到离当前元素最近的开启定位的祖先元祖
如果所有的祖先元素没有开启定位,则会返回body
Element.offsetLeft 返回元素相对于其定位父元素的水平偏移位置
Element.offsetTop 返回元素相对于其定位父元素的垂直偏移位置
Element.scrollHeight 返回元素的整体高度
Element.scrollLeft 返回元素左边缘的与视图之间的距离 获取水平滚动条滚动的距离
Element.scrollTop 返回元素上边距与视图之间的距离 获取垂直滚动条滚动的距离
Element.scrollWidth 返回元素真个滚动区域整体宽度
Element.scrollHeight可以获取元素整个滚动区域的高度
当满足 scrollHeight-scrollTop==clientHeight 时,说明垂直滚动条到底了
当满足 scrollWidth-scrollLeft==clientWidth 时,说明水平滚动条到底了
例子:读取div的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1 {
width: 100px;
height: 100px;
background-color: red;
padding: 10px;
border: 10px solid yellow;
}
#box2 {
padding: 100px;
background-color: #bfa;
}
#box4 {
width: 200px;
height: 300px;
background-color: #bfa;
/* overflow: hidden; */
overflow: auto;
/* 出现滚动条 */
}
#box5 {
width: 450px;
height: 600px;
background-color: yellow;
}
</style>
<script>
window.onload = function () {
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function () {
// alert(box1.clientHeight);//返回元素的可见高度 120 包括:内容区和内边距
// alert(box1.offsetWidth);//返回元素的宽度, 140 包括内容区、内边距、边框
var op = box1.offsetParent; //会获取到离当前元素最近的开启定位的祖先元祖
//如果所有的祖先元素没有开启定位,则会返回body
//alert(op.id);
//返回元素的水平偏移位置
//alert(box1.offsetLeft);
//alert(box4.clientHeight);//获得可见高度,滚动条内部高度,滚动条栈占17 283
//alert(box4.scrollHeight);//获得滚动区域的高度 600
//alert(box4.scrollWidth);//返回元素整体宽度 450
//alert(box4.scrollLeft);//获取水平滚动条滚动的距离
alert(box4.scrollTop);//获取垂直滚动条滚动的距离
/*当满足 scrollHeight-scrollTop==clientHeight 时,说明垂直滚动条到底了
当满足 scrollWidth-scrollLeft==clientWidth 时,说明水平滚动条到底了*/
};
};
</script>
</head>
<body>
<button id="btn01">点我一下</button>
<br>
<div id="box4">
<div id="box5">
</div>
</div>
<br>
<br>
<br>
<br>
<div id="box2" style="position:relative;">
<div id="box1"></div>
</div>
</body>
</html>
测试图: