client(客户端),offset(偏移),scroll(滚动)
1.client系列
clientTop 内容区域到边框顶部的距离 ，说白了，就是边框的高度
clientLeft 内容区域到边框左部的距离，说白了,就是边框的宽度
clientWidth 内容区域+左右padding 可视宽度
clientHeight 内容区域+ 上下padding 可视高度
例:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 100px;
height: 100px;
border: 10px solid red;
padding: 50px;
}
</style>
</head>
<body>
<div class="box">aaa</div>
<script>
oBox=document.getElementsByClassName('box')[0];
console.log(oBox.clientTop);//10
console.log(oBox.clientLeft);//10
console.log(oBox.clientWidth);//200
console.log(oBox.clientHeight)//200
</script>
</body>
2.屏幕的可视区域
<script type="text/javascript">
// 屏幕的可视区域
window.onload = function(){
// document.documentElement 获取的是html标签
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
// 窗口大小发生变化时，会调用此方法
window.onresize = function(){
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
}
}
</script>
3.offset系列
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body style="height: 2000px">
<div>
<div class="wrap" style=" width: 300px;height: 300px;position: relative">
<div ></div>
<script>
window.onload=function(){
oInput=document.getElementsByClassName('input')[0];
oDowm=document.getElementsByClassName('down')[0];
fromtop=oInput.offsetTop;
console.log(fromtop);
window.onscroll=function(){
var othertop=document.documentElement.scrollTop;
// console.log(othertop);
if(othertop>=fromtop){
oDowm.style.display='block';
}else{
oDowm.style.display='none';
}
};
}
</script>
</body>
相关文章：