- 获取元素的可见宽度和高度
script代码：
<script>
window.onload = function() {
// clientWidth //用于获取元素的可见宽度
// clientHeight //用于获取元素的可见高度
//注意可见宽度和高度的计算是 内容区+内边距
let btn01 = document.getElementById('btn01');
let box1 = document.getElementById('box1');
btn01.onclick = function() {
console.log(box1.clientHeight);//220
console.log(box1.clientWidth);//220
}
}
</script>html代码：
<button id="btn01">点我一下</button>
<br><br>
<div id="box1"></div>style代码：
#box1 {
width: 200px;
height: 200px;
background-color: #bfa;
padding: 10px;
border: 10px solid red;
}- 获取元素的高度和宽度offsetHeight/offsetWidth
JS代码：
window.onload = function(){
// // 元素相对与父元素的
// offsetParent：父元素容器
// offsetLeft：距离父元素左边距离
// offserTop：距离父元素顶部距离
// offsetHeight/offsetWidth 获取的范围是内容区+内边距+边框
let btn02 = document.getElementById('btn02');
btn02.onclick = function() {
// alert(box1.offsetHeight)
// offsetParent获取的是父元素容器，其原理与绝对定位相类似
console.log(box1.offsetParent)//body
console.log(box1.offsetHeight)//240
console.log(box1.offsetWidth)//240
console.log(box1.offsetTop)//0
console.log(box1.offsetLeft)//0
}
}HTML：
<button id="btn02">获取offset相关</button>
<br><br>
<div id="box1"></div>- 获取滚动条相关的scroll
JS：
window.onload = function(){
// 整体的可见宽度和高度
// scrollWidth：滚动的宽度
// scrollHeight：滚动的高度
// scrollLeft：水平滚动条滚动的距离
// scrollTop：垂直滚动条滚动的距离
let box4 = document.getElementById('box4');
let btn03 = document.getElementById("btn03");
btn03.onclick = function() {
console.log(box4.clientHeight);//283，原因是部分内容被垂直滚动条挡住
console.log(box4.clientWidth);//283，原因是部分内容被水平滚动条挡住
console.log(box4.offsetHeight);
console.log(box4.scrollHeight);
console.log(box4.scrollTop);
// 通过Math.round()可以将数值取整
console.log(Math.round(box4.scrollHeight - box4.scrollTop));
}
}HTML：
<button id="btn03">获取scroll</button>
<br><br>
<div id="box4">
<div id="box5"></div>
</div>style:
<style>
#box4 {
width: 300px;
height: 300px;
background-color: orange;
overflow: auto;
}
#box5 {
width: 450px;
height: 600px;
background-color: #bfa;
}
</style>- 综合使用
通过使用这些的属性可以判断用户是否滚动到底部，如果滚动到底部才能继续执行操作等功能。如用户读完协议才可以点击按钮进行注册。
JS：
window.onload = function(){
//监听滚动条滚动才触发
let content = document.getElementById("content");
let inputs = document.getElementsByTagName("input");
// onscroll用于监听滚动条是否滚动
content.onscroll = function() {
console.log(Math.round(content.scrollHeight - content.scrollTop));
if (Math.round(content.scrollHeight - content.scrollTop) == content.clientHeight) {
// 设置表单是否禁用，直接元素.disabled，true表示禁用，false表示不禁用
inputs[0].disabled = false
inputs[1].disabled = false
}
}
}HTML：
<h3>请仔细阅读协议</h3>
<p id='content'>
请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册
请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册
请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册
请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册
请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册
请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册
请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册
请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册 请认真阅读好下面的协议内容才可以进行注册，否则将无法进行注册
</p>
<input type="checkbox" name="" disabled="disabled">您已经完成协议的阅读
<input type="button" value="注册" disabled="disabled">style：
#content {
width: 200px;
height: 400px;
background-color: #bfa;
overflow: auto;
margin: 10px;
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
