JavaScript获取与操作窗口属性

阳光穿透心脏的1/2处 2022-05-18 23:44 294阅读 0赞

### 一、查看滚动条的滚动距离 ###

常用属性： window.pageXOffset/pageYOffset

IE8及IE8以下不同时兼容 document.body.scrollLeft/scrollTop 和 documentElement.scrollLeft/scrollTop ，兼容性比较混乱，用时取两个值相加。因为有个规律是一个有值另一个就为0；

以下为获取滚动条滚动距离的**兼容性**函数

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

### 二、查看视口的尺寸 ###

window.innerWidth/innerHeight （加上 滚动条宽度 / 高度） IE8及IE8以下不兼容

document.documentElement.clientWidth/clientHeight 标准模式下，任意浏览器都兼容

document.body.clientWidth/clientHeight 适用于怪异模式下的浏览器

以下为查看视口的尺寸的**兼容性**函数

//获取页面窗口大小的兼容性函数
    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

domEle.getBoundingClientRect(); 兼容性很好 该方法返回一个对象，对象里面有left,top,right,bottom等属性。left和top代表该元素左上角的X和Y坐标，right和bottom代表元素右下角的X和Y坐标 height和width属性。老版本IE并未实现。 注意：返回的结果并不是“实时的”

### 查看元素的位置 ###

dom.offsetLeft, dom.offsetTop 对于无定位父级的元素，返回相对文档的坐标。对于有定位父级的元素，返回相对于最近的有定位的父级的坐标。(无论是 left 还是margin-left等都是距离。 )

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

### 让滚动条滚动 ###

window上有三个方法 scroll(),scrollTo(),scrollBy();

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

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