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: "";
             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];
    }
}