js-获取DOM尺寸、位置

获取DOM尺寸、位置

查看滚动条的滚动位置

window.pageXOffset / window.pageYOffset(IE8及其以下版本不支持)
document.body/documentElement.scrollLeft/scrollTop
- 兼容性比较混乱，使用时通常取两个属性值相加，因为不可能存在两个同时有值。
封装兼容性方法getScrollOffset():

function getScrollOffset(){
        if(window.pageXOffset){
            return{
                x:window.pageXOffset,
                y:window.pageYOffset
            }
        }else{
            return{
                x:document.documentElement.scrollLeft,
                y:document.documentElement.scrollTop
            }
        }
    }

查看可视化窗口的尺寸

window.innerWidth/innerHeight
- IE8及其以下版本不兼容
document.documentElement.clientWidth/clientHeight
- 标准模式下，任意浏览器兼容
document.body.clientWidth/clientHeight
- 适合怪异(混杂)模式下浏览器
封装兼容性方法，getViewportOffset:

function getViewportOffset(){
        if(window.innerHeight){
            return{
                width:window.innerWidth,
                height:window.innerHeight
            }
        }else{
            if(document.compatMode == 1){
                return{
                    width:document.documentElement.clientWidth,
                    height:document.documentElement.clientHeght
                }
            }else{
                return{
                    width:document.body.clientWidth,
                    height:document.body.clientHeght
                }
            }
        }
    }

PS:

<!DOCTYPE html>限定了浏览器的渲染模式为标准模式，如果在Html文件删去这一句代码，则采用怪异(混杂)模式。
标准模式下，网页按照现行的浏览器版本渲染；
怪异模式下，网页会选择浏览器版本向后兼容的方式渲染。

查看元素的几何尺寸

domEle.getBoundingClientRect();
- 兼容性很好。
- 返回的是一个对象，里面包括该元素的bottom,left,top right（bottom,left表示元素左下角坐标X,y值）；width,height（在老版本IE浏览器中不兼容）。
- 返回的结果并不是实时的。

查看元素的尺寸

domEle.offsetWidth, domELe.offHeight

查看元素的位置

domEle.offsetLeft,domEle.offTop
- 对于无定位父级的元素，返回相对于文档的位置；对于有定位父级的元素，返回相对于最近的有定位父级元素的位置。
domEle.offsetPerent
- 返回最近的有定位的父级元素，如果没有就返回body;body.offsetParent为null.

让滚动条滚动

window上有三个方法：scroll(),scrollTo(); scrollBy()
三个方法的功能类似，都是在括号里面传入x,y的值。
区别：前两个都是滚动到x,y坐标；scrollBy(),是在之前的基本数据上做累加。

js-获取DOM尺寸、位置

获取DOM尺寸、位置

查看滚动条的滚动位置

查看可视化窗口的尺寸

PS:

查看元素的几何尺寸

查看元素的尺寸

查看元素的位置

让滚动条滚动

猜你喜欢