JavaScript中获取窗口的属性（视口高度、元素尺寸、元素位置）

获取窗口属性

查看滚动条的滚动距离

兼容性比较混乱，同时取两个值相加，因为不可能存在两个同时有值

IE8及IE8以下不兼容

window.pageXOffset/pageYOffset

document.body/documentElement.scrollLeft/scrollTop

立即学习“Java免费学习笔记（深入）”；

封装兼容性方法，求滚动轮滚动离getScrollOffset()

为了解决兼容性的问题，我们来封装一个函数：

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

登录后复制

查看视口的尺寸

适用于怪异模式（向后兼容）下的浏览器

标准模式下，任意浏览器都兼容

IE及IE8以下不兼容

window.innerWidth/innerHeight

document.documentElement.clientWidth/clientHeight

document.body.clientWidth/clientHeight

封装兼容性方法，返回浏览器视口尺寸getViewportOffset()

为了解决兼容性的问题，我们来封装一个函数:

    function getSViewportOffset() {        if(window.innerWidth) {            return {                w : window.innerWidth,                h : window.innerHeight            }        }else{            if(document.compatMode ==="BackCompat") {                return {                    w : document.body.clienWidth,                    h : document.body.clientHeight                }            }else{                return {                    w : document.documentElement.clientWidth,                    h : document.documrntElement.clientHeight                }            }    }

登录后复制

查看元素的几何尺寸

domEle.getBoundingClientRect();

兼容性很好

该方法返回一个对象，对象里面有left，top，right，bottom等属性。left和top代表该元素左上角的X和Y坐标，right和bottom代表元素右下角的X和Y坐标。

height和width属性老版本IE不显示（人为解决：分别相减一下就能得出）

返回的结果并不是”实时的”

让滚动条滚动

window上有三个方法

scroll(x,y)在x轴、y轴上滚动的位置,scrollTo(x,y)
让滚动条滚动到当前位置，而不是累加距离（这两种方法是完全一样的）

scrollBy();累加滚动距离

三个方法功能类似，用法都是将x,y坐标传入。即实现让滚动条滚动到当前位置。

区别：scrollBy()会在之前的数据基础之上做累加。

eg：利用scroll()页面定位功能。

eg：利用scrollBy()快速阅读功能。

练习：
做一个小阅读器，会自动翻页。

nbsp;html>    文本内容    
start
    
stop
    var start = document.getElement.getElementsByTagName('p')[0];    var stop = document.getElement.getElementsByTagName('p')[1];    var timer = 0;    var key = true;   //加锁，防止连续点start产生累加加速    start.onclick = function() {        if(key) {            timer = setInterval(function() {                window.scollBy(0,10);            },100);            key = false;        }    }    stop.onclick = function() {        clearInterval(timer);        key = true;    }

登录后复制

查看元素的尺寸（视觉上的）

dom.offsetWidth,dom.offsetHeight

查看元素的位置

dom.offsetLeft,dom.offsetTop

对于无定位父级的元素，返回相对文档的坐标。对于有定位的父级元素，返回相对于最近的有定位的父级的坐标。

dom.offsetParent

返回最近的有定位的父级，如无，返回body,body.offsetParent返回null

eg：求元素相对于文档的坐标getElementPosition

相关文章：

js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法

Javascript实现获取窗口的大小和位置代码分享

相关视频：

JavaScript数组对象属性length和二维数组

以上就是JavaScript中获取窗口的属性（视口高度、元素尺寸、元素位置）的详细内容，更多请关注【创想鸟】其它相关文章！