javascript 中的各类width,height属性整理

时间 2019-11-30

标签 javascript 各类 width height 属性整理栏目 JavaScript 繁體版

原文原文链接

目标：javascript

理清js及jquery的各类width和height

对象：css

Window对象表示浏览器中打开的窗口；window对象能够省略。好比alert()、window.alert()。
Document对象是Window对象的一部分。那么document.body 咱们能够写成window.document.body；浏览器的HTML文档成为Document对象。
window对象的location属性引用的是Location对象，表示该窗口中当前显示文档的URL。
document的对象的location属性也是引用了Location对象。(window.location === document.location; //true)

与window相关的宽高有一下几个：html

window.innerWidth，经过字面意思咱们知道这是一个内部的宽度
window.innerHeight，内部的高度
window.outerWidth，外部的宽度
window.outerHeight，外部的高度

　　　　window.innerHeight和window.outHeightjava

window.innerWidth和window.outWidthjquery

挂靠在window下的宽高还有window.screen， window.screen包含有关用户屏幕的信息。它包括：浏览器
- window.screen.width
- window.screen.height
- window.screen.availHeight
- window.screen.availWidth
- window.screenTop
- window.screenLeft
图解spa

window相关宽高代码演示

演示代码：3d
```
console.log("innerWidth=",innerWidth); console.log("innerHeight=",innerHeight); console.log("outerWidth=",outerWidth); console.log("outerHeight=",outerHeight);
```
Chrome浏览器下效果

代码：code
```
console.info("screen.width=",screen.width); console.info("screen.height=",screen.height); console.info("screen.availWidth=",screen.availWidth); console.info("screen.availHeight=",screen.availHeight);
```
在Chrome浏览器下效果
htm

window相关宽高浏览器兼容问题

innerHeight和outerHeight是不支持IE9如下版本的，而screen系列则不存在兼容问题。

document下面client相关宽高介绍

docment下有三类属性：
1. 与client相关的宽高
2. 与offset相关的宽高
3. 与scroll相关的宽高
与client相关的宽高

与client相关的宽高又有以下几个属性：
- document.body.clientWidth
- document.body.clientHeight
- document.body.clientLeft
- document.body.clientTop
clientWidth和clientHeight 该属性指的是元素的可视部分宽度和高度，即padding+contenr。若是没有滚动条，即为元素设定的高度和宽度。若是出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其原本宽高减去滚动条的宽高。

咱们来看以下代码：
```
body{ border: 20px solid #000; margin: 10px; padding: 40px; background: #eee; height: 350px; width: 500px; overflow: scroll; } console.log(document.body.clientHeight); //430（padding*2+height） console.log(document.body.clientWidth); //580（padding*2+width）
```
与offset相关宽高介绍

与offset相关的宽高又有以下几个属性：
- document.body.offsetWidth
- document.body.offsetHeight
- document.offsetLeft
- document.offsetTop
offsetWidth与offsetHeight 这一对属性指的是元素的border+padding+content的宽度和高度。

该属性和其内部的内容是否超出元素大小无关，只和原本设定的border以及width和height有关。咱们仍是以body为例：
```
body{ border: 20px solid #000; margin: 10px; padding: 40px; background: #eee; height: 350px; width: 500px; overflow: scroll; } console.log("offsetWidth=",document.body.offsetWidth); //620（width+padding*2+border*2） console.log("offsetHeight=",document.body.offsetHeight); //470（width+padding*2+border*2）
```
与scroll相关宽高介绍

与scroll相关的宽高属性有以下几个：
- document.body.scrollWidth
- document.body.scrollHeight
- document.body.scrollLeft
- document.body.scrollTop
scrollWidth和scrollHeight
document.body的scrollWidth和scrollHeight与div的scrollWidth和scrollHeight是有区别的。

咱们先来看看document.body的scrollWidth和scrollHeight：
1. 给定宽高小于浏览器窗口
  - scrollWidth一般是浏览器窗口的宽度
  - scrollHeight一般是浏览器窗口的高度
2. 给定宽高大于浏览器窗口，且内容小于给定宽高
  - scrollWidth给定的宽度+其全部padding、margin和border
  - scrollHeight给定的高度+其全部的padding、margin和border
3. 给定宽高大于浏览器窗口，且内容大于给定宽高
  - scrollWidth内容宽度+其全部的padding、margin和border
  - scrollHeight内容高度+其全部的padding、margin和border
再来看看在某div中scrollWidth和scrollHeight：
- scrollWidth==clientWidth=style.width+style.padding*2
- 在有滚动轴的时候

- scrollWidth==clientWidth=style.width+style.padding*2
- 在有滚动轴的时候

scrollWidth==实际内容的宽度+padding2
scrollHeight==实际内容的高度+padding2

ps.Event对象的5种坐标

哪五种坐标？

clientX和clientY，相对于浏览器（但是区左上角0,0）的坐标
screenX和screenY，相对于设备屏幕左上角（0,0）的坐标
offsetX和offsetY，相对于事件源左上角（0,0）的坐标
pageX和pageY，相对于整个网页左上角（0,0）的坐标
X和Y，原本是IE属性，相对于用CSS动态定位的最内层包容元素

<!DOCTYPE html>
<html>
<head>
	<title>javascript height width test</title>
	
	<style type="text/css">
		body { margin:0px;padding: 0px;width: 300px;border: 10px solid blue; }
	</style>
</head>
<body>

</body>
<script type="text/javascript">
		document.write("innerHeight="+window.innerHeight);//浏览器可视高度
		document.write("innerWidth="+window.innerWidth+"<br>");//浏览器可视宽度

		document.write("outerHeight="+window.outerHeight);//浏览器实际高度
		document.write("outerWidth="+window.outerWidth+"<br>");//浏览器实际宽度

		document.write("clientHeight="+document.body.clientHeight);//content+padding*2 高度
		document.write("clientWidth="+document.body.clientWidth+"<br>");//content+padding*2 宽度
		//总结
		//•假入无padding无滚动条，clientWidth=style.width
		//•假若有padding无滚动轴，clientWidth=style.width+style.padding*2
		//•假若有padding有滚动，且滚动是显示的，clientWidth=style.width+style.padding*2-滚动轴宽度

		document.write("clientLeft="+document.body.clientLeft);
		document.write("clientTop="+document.body.clientTop+"<br>");
		//素周围边框的厚度，若是不指定一个边框或者不定位该元素，他的值就是0

		document.write("offsetHeight="+document.body.offsetHeight);//content+padding*2+border*2 高度
		document.write("offsetWidth="+document.body.offsetWidth);//content+padding*2+border*2 宽度
		// 总结
		//•假如无padding无滚动条无border： •offsetWidth=clientWidth=style.width

		//•假若有padding无滚动条有border： •offsetWidth=style.width+style.padding2+(border-width)2
		//•offsetWidth=clientWidth+border宽度*2

		//•假若有padding有滚动条，且滚动条是显示的，有border： •offsetWidth=style.width+style.padding2+(border-width)2
		//•offsetWidth=clientWidth+滚动条宽度+border宽度*2
	</script>
</html>

javascript 中的各类width,height属性整理

window相关宽高代码演示

window相关宽高浏览器兼容问题

与client相关的宽高

与offset相关宽高介绍

与scroll相关宽高介绍