<!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;
padding: 10px;
background-color: red;
border: 10px solid yellow;
}
#box2{
padding: 100px;
background-color: #bfa;
}
#box4{
width: 200px;
height: 300px;
background-color: #bfa;
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");
var box4 = document.getElementById("box4");
btn01.onclick = function(){
/**
* clientWidth clientHeight
* 获取元素的可见宽度 和 高度
* 不带 px 返回一个数字 可以直接进行计算
* 会获取元素 宽度和高度 包括内容区域 和 内边距 (不包括边框)
*/
// alert(box1.clientWidth);
// alert(box1.clientHeight);
/**
* offsetWidth offsetHeight
* 获取元素的整个宽度 和 高度 包括内容区域 内边距 和 边框
* 不带 px 返回一个数字 可以直接进行计算
*/
// alert(box1.offsetWidth) ;
/**
* offsetParent
* 可以用来获取 当前元素的 定位父元素
* 会获取 离当前元素最近的 开启了定位的 祖先元素
* 如果 所有的祖先元素 都没有开启定位 则 返回body
*/
// var op = box1.offsetParent;
// alert(op.id)
/**
* offsetLeft
* 当前元素 相对于其定位父元素的水平偏移量
* offsetTop
* 当前元素 相对于其定位父元素的垂直偏移量
*/
// alert(box1.offsetLeft) ;
// alert(box1.offsetTop) ;
//alert(box4.clientHeight);
/**
* scrollHeight scrollWidth
* 可以获取整个滚动区域的高度和宽度
*/
// alert(box4.scrollHeight);
// alert(box4.scrollWidth);
/**
* scrollLeft
* 可以获取水平滚动条滚动的距离
* scrollTop
* 可以获取垂直滚动条滚动的距离
*/
// alert(box4.scrollLeft);
// alert(box4.scrollTop);
// alert(box4.clientHeight); // 283
// alert(box4.scrollHeight); // 600
// 当 满足 scrollHeight - scrollTop == clientHeight
// 说明垂直滚动条 滚动 到底了
// alert(box4.scrollHeight - box4.scrollTop);
// 当 满足 scrollWidth - scrollLeft == clientWidth
// 说明垂直滚动条 滚动 到底了
alert(box4.scrollWidth - box4.scrollLeft);
};
}
</script>
</head>
<body>
<button id="btn01">点我一下</button>
<br /> <br />
<div id="box4" >
<div id="box5" ></div>
</div>
<br /> <br />
<div id="box3" >
<div id="box2" style="position: relative;">
<div id="box1"> </div>
</div>
</div>
</body>
</html>
