|
1.查看滚动条的滚动距离 window.pageXOffset 屏幕的右侧，举例网页的左侧有多少像素
window.pageYOffset 屏幕的底端，距离网页的顶端有多少像素 不足：IE9和IE9以下不兼容
IE9以下如何获取滚动像素？ document.body.scrollLeft document.body.scrollTop
document.documentElement.scrollLeft document.documentElement.scrollTop document.body和document.documentElement兼容性比较混乱，
当document.body能获取的时候document.documentElement肯定为0， 当document.documentElement能获取的时候，document.body肯定为0 所以在使用的时候经常这么来用： document.body.scrollLeft + document.documentElement.scrollLeft
小练习：封装一个getScrollOffset()方法解决兼容性问题，使所有版本浏览器都支持。 //兼容版 求浏览器滚动条滚动距离
function getScrollOffset() {
if(window.pageXOffset) {
return {
x : window.pageXOffset,
y : window.pageYOffset
}
}else {
return {
x : document.body.scrollLeft + document.documentElement.scrollLeft,
y : document.body.scrollTop + document.documentElement.scrollTop,
}
}
}
2.查看可视窗口的尺寸（像素）
window.innerWidth / window.innerHeight 可以查看屏幕当前可视的像素，并非屏幕大小。 不足：IE9以下不兼容
document.documentElement.clientWidth
document.documentElement.clientHeight
标准模式下，任意浏览器都支持。
document.body.clientWidth document.body.clientHeight 适用于怪异模式下的浏览器 （比如说h5的文档，把文档类型声明删除掉就是怪异模式...）
封装一个方法，返回浏览器可视化窗口尺寸getViewportOffset(),解决兼容性问题。 function getViewportOffset() {
if(window.innerWidth) {
return {
w : window.innerWidth,
h : window.innerHeight
}
}else {
if(document.compatMode === 'BackCompat'){
w : document.body.clientWidth;
h : document.body.clientHeight
} else {
return {
w : document.documentElement.clientWidth,
h : document.documentElement.clientHeight
}
}
}
}
查看元素的宽高 dom.offsetWidth dom.offsetHeight <style type="text/css">
#only{
background-color: red;
width: 100px;
height: 100px;
}
</style>
<body>
<div id="only"></div>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
</script>
</body>
控制台测试： 
可以获取元素的宽高。
查看元素的位置
dom.offsetLeft , dom.offsetTop 返回相对于与自己最近的有定位的父级元素的位置信息， 如果没有定位的父级元素，则相对于body的坐标。
返回最近的有定位的父级 dom.offsetParent 返回最近的有定位的父级，如果没有，返回body，body.offsetParent返回null
让滚动条滚动 widow上的三个方法 scroll(x,y),scrollTo(x,y) 这两个方法效果一样，小括号里填写的参数为xy为x轴和y轴，要滚到到多少像素的地方 scrollBy(x，y) 小括号里填写的参数为xy为x轴和y轴，要滚动多少像素。填写负数为反方向。 | 
转播
