JavaScript 窗口操作
滚动条滚动距离
window.pageXOffset/pageYOffset; ie8及ie8以下不兼容
ie8及ie8以下使用
document.body.scrollLeft/Top
document.documentElement.scrollLeft/Top
由于兼容性混乱，一个能用 另一个一定是0 所以相加使用。
document.body.scrollLeft+document.documentElement.scrollLeft
//返回滚动条滚动距离 function getScrollOffset() { if (window.pageXOffset) { //((return 大括号必须跟在后面 不能换行 否则返回undefined return { x: window.pageXOffset, y: window.pageYOffset } } else { return { x: document.body.scrollLeft + document.documentElement.scrollLeft, y: document.body.scrollTop + document.documentElement.scrollTop } } }
可视区域窗口尺寸
即html文档可以看见的区域
ie8/ie8以下不兼容
window.innerWidth/innerHeight
标准模式：<!DOCTYPE html>
怪异模式：<!DOCTYPE html>删除 向后兼容
ie8及ie8以下
标准模式下
//document.documentElement.clientWidth/clientHeight;
怪异模式下
//document.body.clientWidth/clientHeight;
查看浏览器模式
document.compatMode
//返回可视区域尺寸 function getViewportOffset() { if (window.innerWidth) { return { w: window.innerWidth, h: window.innerHeight } } else { if (document.compatMode == "BackCompat") { return { w: document.body.clientWidth, h: document.body.clientHeight } } else { return { w: document.documentElement.clientWidth, h: document.documentElement.clientHeight } } } }
查看元素的几何尺寸
1、div.getBoundingClientRect(); //返回结果静态的，不是实时的。返回一个包含left.top.right.bottom,left.top代表左上角的x.y坐标，right.bottom代表右下角的x.y坐标
2、对于无定位的父级，返回相对文档的坐标，对于有定位的父级，返回相对于最近的有定位的父级的坐标位置 忽略自身定位， 相当于父级的位置 offsetLeft/offsetTop
3、返回最近有无定位的父级 offsetParent
让滚动条滚动多少距离
window.scroll(x,y)/scrollTo(x,y);
window.scrollBy(x,y)累加滚动
获取计算样式
window.getComputedStyle(elem,null) 获取计算后的绝对值，获取到的为只读，ie/ie8以下不兼容
null参数：获取伪元素的属性
如下:window.getComputedStyle(div,"after").width ---->10px
div::after{
content: "";
width: 10px;
height: 10px;
background-color: green;
display:inline-block;
}
ele.currentStyle 获取计算后的绝对值 只读,获取的不是绝对值，是界面展示的值。ie/ie8以下
兼容性封装：
/**
* 获取元素界面上的展示的属性
* @param {*} elem
* @param {*} prop
*/
function getStyle(elem, prop) {
if (window.getComputedStyle) {
return window.getComputedStyle(elem, null)[prop];
} else {
return elem.currentStyle[prop];
}
}
