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

目标：

理清js及jquery的各种width和height

对象：

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相关的宽高有一下几个：

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

　　　　window.innerHeight和window.outHeight

window.innerWidth和window.outWidth

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

window相关宽高代码演示

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

代码：
```
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浏览器下效果

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>

posted @ 2017-06-27 11:53 工程师wyy 阅读(1961) 评论(0) 收藏举报

刷新页面返回顶部

工程师wyy

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

window相关宽高代码演示

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

与client相关的宽高

与offset相关宽高介绍

与scroll相关宽高介绍

公告