clientWidth和clientHeight
- 这两个属性可以获取元素的可见宽度和高度
- 这些属性都是不带px的,返回都是一个数字，可以直接进行计算
- 会获取元素宽度和高度，包括内容区和内边距
- 这些属性都是只读的，不能修改
例如：
box1.clientWidth
offsetWidth和offsetHeight
- 获取元素的整个的宽度和高度，包括内容区、内边距和边框
例如：
box1.offsetWidth
offsetParent
- 可以用来获取当前元素的定位父元素
- 会获取到离当前元素最近的开启了定位的祖先元素
- 如果所有的祖先元素都没有开启定位，则返回body
<body>
<div id="box2" style="position: relative;">
<div id="box1" width="100px"></div>
</div>
</body>
<script>
alert(box1.offsetParent);
</script>
offsetLeft和offsetTop
- offsetLeft-当前元素相对于其定位父元素的水平偏移量
- offsetTop-当前元素相对于其定位父元素的垂直偏移量
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box2{
width: 200px;
padding: 100px;
background-color: #bfa;
margin: 50px;
}
#box1 {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="box2" style="position: relative;">
<div id="box1" width="100px"></div>
</div>
</body>
<script>
alert(box1.offsetLeft);//100
</script>
</html>
scrollWidth和scrollHeight
- 可以获取元素整个滚动区域的宽度和高度
scrollLeft和scrollTop
- scrollLeft-可以获取水平滚动条滚动的距离
- scrollTop-可以获取垂直滚动条滚动的距离
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box1{
width: 500px;
height: 500px;
background-color: red;
}
#box2{
width: 300px;
height: 300px;
background-color: #bfa;
overflow: auto;
}
</style>
</head>
<body>
<div id="box2" style="position: relative;">
<div id="box1"></div>
</div>
</body>
<script>
alert(box2.scrollHeight);//500
alert(box2.scrollLeft);//0
</script>
</html>
当满足scrol1Height - scrollTop == clientHeight，说明垂直滚动条滚动到底了
当满足scrollWidth - scrollLeft == clientWidth，说明水平滚动条滚动到底了
垂直滚动条到底练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#info{
width: 300px;
height: 500px;
background-color: #bfa;
overflow: auto;
}
</style>
</head>
<body>
<h3>欢迎注册！</h3>
<p id="info">
欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
</p>
<!--如果为表单项添加disabled="disabled”则表单项将变成不可用的状态-->
<input type="checkbox" disabled="disabled"/>我已阅读完毕，同意以上协议。
<input type="submit" value="注册" disabled="disabled"/>
</body>
<script>
//当垂直滚动条滚动到底时使表单项可用
//onscroll -该事件会在元素的滚动条滚动时触发
//获取id为info的p元素
var info=document.getElementById("info");
//获取两个表单项
var inputs=document.getElementsByTagName("input");
//为info绑定一个滚动条滚动的事件
info.onscroll=function(){
//检查垂直滚动条是否滚动到底
if(info.scrollHeight-info.scrollTop==info.clientHeight){
//滚动条滚动到底，使表单项可用
//disabled属性可以设置一个元素是否禁用
//如果设置为true，则元素禁用,如果设置为false，则元素可用
inputs[0].disabled = false;
inputs[1].disabled = false;
}
};
</script>
</html>
