jquery width,innerWidth,outerWidth

jquery中获取/设置一个元素的宽度/高度,我们通常使用width()、height()这两个方法,但是除了width之外还有innerWidth和outerWidth,你知道吗?对应的,height也有innerHeight和outerHeight。

这就必须讲到盒子模型,盒子模型将一个元素的宽高用盒子模式表达出来,包括元素内容的宽高(width)、包含内边距的宽高(padding)、再向外包含边框粗细的宽高(border-width)、再向外包含元素外边距的宽高(margin)。

在不同版本的浏览器中,使用css设置width值并不一定能得到相同的结果,但现代浏览器基本都统一了盒子模型,所以总体上基本不会有差别。

在盒子模型的基础上,jQuery的width相关方法就可以获取上面所说的四种宽度的任意一种。

0042_04_04

width()获取/设置的是元素的内容的实际宽度。比如我们举一个例子:

#test {
  width: 100px;
  padding: 10px;
  border: #ccc solid 5px;
  margin: 15px;
}

#test的width就是100px。由于重叠的margin值会被忽略,所以这个盒子实际上最终的外部宽度是100px + 10px * 2 + 5px *2 + 15px[*2]. 如果我们通过$('#test').width(50)设置元素宽度,只有100px会变成50px其他值不会发生变化。

0042_04_05

#test的innerWidth就是width+padding的宽度,倘若我们使用$('#test').innerWidth(150)进行设置,你会发现,上述四个值中,后两个值不会变化,而前面的padding值其实也不会变化,但是它会被计算在变化后的innerWidth中,所以其实这个时候,width会变为130px。

0042_04_06

innerWidth不会把边框计算在内,但是outerWidth则正好包括边框。例如我们使用$('#test').outerWidth(200),这个时候要把边框也计算到变化的宽度中,因此实际上此时的width值变为了170px。

使用var outerWidth = $('#test').outerWidth(true)可以获得包括margin在内的整个盒子模型外边界的宽度。但是由于margin所在的视界并不会被用于计算变化的宽度,所以我们无法通过这种方法设置整个盒子模型外边界的宽度。但是实际上,我们在实际开发中,会通过先忽略margin后进行计算的方法使用outerWidth来设置盒子宽度。

掌握这个知识点其实很重要,因为我们会经常改变页面中元素的宽度,比如拖拽resize等操作,如果在这些特定的场景下心中没有盒子模型,很难得到我们想要的结果。

2016-06-17 | ,