js获取宽高

有一个问题

且看题目， 写的是获取宽高， 所以应该有一个隐含的谓语， 获取谁的宽高？本文中， 要获取三个东东的宽高。 所以没有写谓语。

获取哪三个的宽高

1. 屏幕
2. 浏览器window窗口
3. 页面元素

获取屏幕的宽高

对于一个页面， 最外层对象是window。 在window对象上有一个screen对象。 该对象中存有关于我们电脑屏幕的信息。

关于宽高的信息如下

window.screen = {
	avaliHeight: 1030,  //没有任务栏之后的高度
	avaliWidth: 1920,   //没有任务栏之后的宽度
	height: 1080,       //整体的高度
	width: 1902         //整体的宽度
}

获取浏览器窗口的宽高

window对象本来就是描述页面窗口的对象， 所以有关window本身的属性都在window的根属性上

window = {
	window.outerHeight: 1048,  //浏览器的整体高度， 包括工具栏， 地址栏等
	window.outerWidth: 1938,   //浏览器整体的宽度
	window.innerHeight: 451,   //浏览器可用的高度
	window.innerWidth: 1920    //浏览器可用的宽度
}

获取页面元素的宽高

使用dom属性获取

//获取元素大小
element.offsetHeight   //包括边框
element.offsetWidth
element.clientHeight   //不包括边框， 只包括内边距
element.clientWidth

//获取元素的偏移量
element.offsetLeft //相对于父元素的偏移量
element.offsetTop  

//所以如果想获取的元素距离页面的偏移量， 需要使用offsetParent递归到底，所有相加获取

function getElementLeft(element) {
	var actualLeft = element.offsetLeft;
	var current = element.offsetParent;
	if(current != null){
		actualLeft += current.offsetLeft;
		current = current.offsetParent;
	}	
	return actualLeft;
}
//这里需要注意一点就是， offsetParent 不一定等于 parentNode。 如td的情况： offsetParent为table，parentNode为tr

使用element.style

该方法只能获取到有内联样式的元素的宽高

<div style="height: 100px;"></div>
//由于有内联样式所以可以使用element.style.height

使用getComputedStyle方法

该方法返回与使用element.style一样格式的结果： CSSStyleDeclaration 对象。且不会收内联样式的局限， 读取的样式是最终样式，包括了“内联样式”、“嵌入样式”和“外部样式”。

window.getComputedStyle(element); 

结尾

以上便是我所知道的获取宽高的内容， 若有补充欢迎， 如有错请指正。

添加

引入一个问题: 得到元素与页面的距离.

1. 可以通过上面的getElementLeft方法来获取. 其思想就是通过获取offsetLeft等递归到顶向加
2. 可以通过getBoundingClientReact方法,这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。在IE中，默认坐标从(2,2)开始计算，导致最终距离比其他浏览器多出两个像素，我们需要做个兼容。

由于得到元素与页面的距离常用来判断一个元素的可见性, 所以再扩展出一个方法 IntersectionObserver(交叉观察器)