js/jQuery宽高的理解与应用

由于在工作中经常要用到获取元素或者可视区等等的宽高，但是常常会用错，今天就根据慕课网的讲解总结一下js与jQuery中的宽高与应用，方便以后的工作与学习。

一、.与window相关的宽高

浏览器窗口的尺寸：

window.innerWidth(Height);//浏览器内部宽度（高度）

window.outerWidth(Height);//浏览器外部宽度（高度）

如下图所示：



window.screen对象包含有关用户屏幕的信息。具体有：

window.screen.height;//返回当前屏幕高度(分辨率值)

window.screen.width;//返回当前屏幕宽度(分辨率值)

window.screen.availHeight;//返回当前屏幕高度(空白空间)

window.screen.availWidth;//返回当前屏幕宽度(空白空间)

window.screenTop;//screenTop属性返回窗口相对于屏幕的Y坐标。

window.screenLeft;//screenLeft属性返回窗口相对于屏幕的X坐标。

window.document.body.offsetHeight; //返回当前网页内容的高度

window.document.body.offsetWidth; //返回当前网页宽度

详见下图:



兼容性:

// 对于IE 5 6 7 8 版本

document.documentElement.clientHeight

document.documentElement.clientWidth

// 或者

document.body.clientHeight

document.body.clientWidth

// 使用

var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

二、document下的宽高

1.与client相关的宽高

与client相关的宽高又有如下几个属性：

1.document.body.clientWidth//元素宽度（可视内容区+内边距）

2.document.body.clientHeight//元素高度（可视内容区+内边距）

3.document.body.clientLeft//border-top的border-width

4.document.body.clientTop//border-left的border-width

clientWidth和clientHeight

该属性指的是元素的可视部分宽度和高度，即

padding+contenr

。

如果没有滚动条，即为元素设定的高度和宽度。

如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高。

请看以下代码：

body{

border: 20px solid #000;

margin: 10px;

padding: 40px;

background: #eee;

height: 500px;

width: 700px;

overflow: scroll;

}

console.log(document.body.clientWidth); // 700+padding(80) = 780

console.log(document.body.clientHeight); // 500 + padding(80) = 580

对比滚动条出现前后：

创建一个div并为其添加样式如下：

.testBox{

border: 20px solid #000;

margin: 10px;

padding: 40px;

background: #eee;

height: 350px;

width: 500px;

overflow: hidden;

}

<script type="text/javascript">

var OtestBox = document.getElementById('testBox');

console.log(OtestBox.clientWidth); // 500+padding(80) = 580

console.log(OtestBox.clientHeight); // 350 + padding(80) = 430

</script>

此时为div设置overflow:hidden;没有出现滚动条



当为div设置样式overflow:scroll;时，此时会出现滚动条;

clientLeft和clientTop

这一对属性是用来读取元素的宽度和高度的
clientTop=border-top的border-width
clientLeft=border-left的border-width
小结clientWidth和clientHeight：
无padding无滚动 ： clientWidth = 盒子的width

有padding无滚动 ： clientWidth = 盒子的width + 盒子的padding * 2

有padding有滚动 ： clientWidth = 盒子和width + 盒子的padding * 2- 滚动轴宽度

2.与offset相关宽高介绍

与offset相关的宽高有以下几个属性：

1.document.body.offsetWidth//元素的border+padding+content的宽度

2.document.body.offsetHeight//元素的border+padding+content的高度

3.document.offsetLeft

4.document.offsetTop

offsetWidth与offsetHeight

该属性和其内部的内容是否超出元素大小无关，只和本来设定的border以及width和height有关

例如：

.testBox{

border: 20px solid #000;

margin: 10px;

padding: 40px;

background: #eee;

height: 350px;

width: 500px;

overflow: scroll;

font-size: 14px;

line-height: 1.8;

}

<script type="text/javascript">

var OtestBox = document.getElementById('testBox');

console.log(OtestBox.offsetWidth); // 500+padding(80)+border-width(40) = 620

console.log(OtestBox.offsetHeight); // 350 + padding(80)+border-width(40) = 470

</script>

如下图：



总结


假如无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

offsetLeft和offsetTop

了解这两个属性我们必须先了解它，什么是offsetParent

如果当前元素的父级元素没有进行CSS定位（position为absolute或relative）,offsetParent为body.

假如当前元素的父级元素中有CSS定位，offsetParent取最近的那个父级元素

offsetLeft的兼容性问题：

在IE6/7中

offsetLeft = offsetParent的padding-left + 当前元素的margin-left

在IE8/9/10以及chrome中

offsetLeft = offsetParent的margin-left + offsetParent的border宽度 + offsetParent的padding-left + 当前元素的margin-left

在FireFox中

offsetLeft = offsetParent的margin-left + 当前元素的margin-left + offsetParent的padding-left

如下所示：

body{

border: 20px solid #000;

margin: 10px;

padding: 40px;

background: #eee;

height: 350px;

width: 500px;

overflow: scroll;

}

.testBox {

width:400px;

height:200px;

padding:20px;

margin:10px;

background:red;

border:20px solid #000;

overflow:auto;

}

<script type="text/javascript">

var OtestBox = document.getElementById('testBox');

console.log(OtestBox.offsetTop);

console.log(OtestBox.offsetLeft);

</script>

在IE8/9/10以及chrome中：

div.offsetLeft = 本身的margin10 + 父级元素的padding40 + margin10 + border20 = 80

div.offsetTop = 本身的margin10 + 父级元素的padding40 + margin10 + border20 = 80

在FireFox：（相比chrome中少了border）

div.offsetLeft = 本身的margin10 + 父级元素的padding40 + margin10 = 60

div.offsetTop = 本身的margin10 + 父级元素的padding40 + margin10 = 60

在IE6/7中：（相比在FireFox，不但少了border还少了父级元素的margin）

div.offsetLeft = 本身的margin10 + 父级元素的padding40 = 50

div.offsetTop = 本身的margin10 + 父级元素的padding40 = 50

与scroll相关的宽高 (实际项目中用的最多)

与scroll相关的宽高属性有如下几个：

1.document.body.scrollWidth

2.document.body.scrollHeight

3.document.body.scrollLeft

4.document.body.scrollTop

scrollWidth和scrollHeight

document.body的scrollWidth和scrollHeight与div的scrollWidth和scrollHeight是有区别的。

在body中的scrollWidth和scrollHeight

当给定宽高小于浏览器窗口的宽高

scrollWidth = 通常是浏览器窗口的宽度

scrollHeight = 通常是浏览器窗口的高度

当给定宽高大于浏览器窗口的宽高，且内容小于给定宽高的时候

scrollWidth = 给定宽度 + 其所有的padding + margin + border

scrollHeight = 给定高度 + 其所有的padding + margin + border

当给定宽高大于浏览器窗口宽高，且内容大于给定宽高

scrollWidth = 内容宽度 + 其所有的padding + margin + border

scrollHeight = 内容高度 + 其所有的padding + margin + border

在某div中的scrollWidth和scrollHeight

在无滚动轴的时候：



scrollWidth==clientWidth=style.width+style.padding*2

在有滚动轴的时候：



scrollWidth = 实际内容的宽度 + padding*2

scrollHeight = 实际内容的高度 + padding*2

scrollLeft和scrollTop

这对属性是可读写（可被重新赋值） 的，指的是当元素其中的内容超出其宽高的时候，元素被卷起来的高和宽度。

obj.style.width和obj.style.height

对于一个dom元素，它的style属性返回的是一个对象，这个对象中的任意一个属性是可读写的，style.width等于CSS属性中的宽度style.height等于CSS属性中的高度。

Event对象的5种坐标

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

理解可参照以下例子：
<div id="testBox" style="width: 200px;height: 200px;background: red;margin: 100px auto;"></div>

<script type="text/javascript">

OtestBox.onclick = function(e){

var e = e||window.event;

console.log("clientX "+e.clientX + " : " + " clientY "+e.clientY);

console.log("screenX "+e.screenX + " : " + " screenY "+e.screenY);

console.log("offsetX "+e.offsetX + " : " + " offsetY "+e.offsetY);

console.log("pageX "+e.pageX + " : " + " pageY "+e.pageY);

console.log("x "+e.x + " : " + " y "+e.y);

}

</script>

效果如下：

js中的宽高属性总结：

第二部分 jQuery中的宽高属性

1 width()

特殊元素window.document只可以读，普通元素可以读写，width()返回结果无单位，css("width")的结果有单位

2 innerWidth(Height)()

包含padding（不推荐window,document调用）

3 outerWidth(Height)()

包含padding和border，当传true时包含margin，不传时不包含margin（不推荐window,document调用）

4 scrollLeft()

相对于水平滚动条左边的距离，如果滚动条非常左、或者元素不能被滚动，这个值为0；

5 scrollTop()

相对于垂直滚动条上边的距离，如果滚动条非常上、或者元素不能被滚动，这个值为0；

6 .offset()

相对于document的当前坐标值(相对于body左上角的left,top的值)；

7 .position()

相对于offset parent的当前坐标值(相对于offset parent元素的左上角的left、top的值)