offset client scroll详解

location对象

location对象是window对象下的一个属性

location可以获取或设置浏览器地址栏的url

history对象

back（）：回到上一级

forward（） 下一级

go（）：跳转

navigator 对像

userAgent（）：可以查看当前浏览器的类型

platform（）：可以查看用户的操作系统类型

偏移量

给两个盒子（都有padding和margin，border）

<div id="box"> <div id="son"></div> </div> <style> * { padding: 0; margin: 0; } #box { width: 300px; height: 300px; border: 5px solid #000; padding: 10px; margin: 100px; } #son { width: 100px; height: 100px; border: 2px solid #ccc; padding: 10px; margin: 20px; } </style>

offset系列

<script> var box = document.getElementById('box') var son = document.getElementById('son') console.log(box.offsetTop); //100 box距离浏览器顶部的距离 console.log(box.offsetLeft); //100 box距离浏览器左边的距离 console.log(box.offsetWidth); //330 = box的width(300) + border(10) + padding(20) console.log(box.offsetHeight);//330 = box的height(300) + border(10) + padding(20) console.log(son.offsetTop); //135 son距离浏览器顶部的距离 console.log(son.offsetLeft);//135 son距离浏览器左边的距离 console.log(son.offsetWidth); //124 = son的width + padding +border console.log(son.offsetHeight);//124 = son的height + padding +border </script>

client系列

console.log(box.clientTop);//5 内容到边框的距离 相当于border的高度 console.log(box.clientLeft);// 5 内容到边框的距离 相当于border的宽度 console.log(box.clientWidth);//320 盒子的width + 盒子的padding console.log(box.clientHeight);//320 盒子的height + 盒子的padding

scroll系列

console.log(box.scrollLeft) // 有横向滚动条时 为 内容向左滚出去的距离 console.log(box.scrollTop) // 有竖向滚动条时 为 内容向上滚出去的距离 console.log(box.scrollWidth) //整个文本内容的宽度 console.log(box.scrollHeight)//整个文本内容的高度