获取窗口属性,获得DOM尺寸

获取滚动条x轴与y轴的距离

function getScrollOffset() {
    if(window.pageXOffset) {
        return {
            x : window.pageXOffset,
            y : winodw.pageYOffset
        }
    }else{
        return {//兼容IE之前版本
            x : document.body.scrollLeft + document.documentElement.scrollLeft,
            y : document.body.scrollTop + document.documentElement.scrollTop
        }
    }
}

加上为标准模式,不加为怪异模式/混杂模式

怪异模式为了向后(版本)兼容

获取可视窗口的大小

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
            }
        }
    }
}

查看元素的尺寸

dom.offsetWidth, dom.offsetHeight

查看元素的位置

dom.offsetLeft, dom.offsetTop

对于无定位父级的元素,返回相对文档的坐标。

对于有定位父级的元素,返回相对于最近的有定位的父级的坐标。

返回最近有定位的父级

dom.offsetParent

让滚动条滚动

  • window上有三个方法
  • scroll(),scrollTo() ,scrollBy();
  • 三个方法类似,将x,y坐标传入,即实现让滚动条滚动到当前位置。
  • 区别:scrollBy()会在之前的数据基础上做累加。

获取元素的样式

function getStyle(elem,prop) {
    if(window.getComputedStyle) {
        return window.getComputedStyle(elem,null)[prop];
    }else{//兼容IE
        return elem.currentStyle[prop];
    }
}

window.getComputedStyle(elem,"after")获取伪元素样式

你可能感兴趣的:(获取窗口属性,获得DOM尺寸)