jquery中获取/设置一个元素的宽度/【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】高度，我们通常使用width()、hei原创内容，盗版必究。【版权所有，侵权必究】ght()这两个方法，但是除了width【本文首发于唐霜的博客】【原创不易，请尊重版权】之外还有innerWidth和outer【本文受版权保护】【版权所有】唐霜 www.tangshuang.netWidth，你知道吗？对应的，heigh本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。t也有innerHeight和outer【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】Height。

这就必须讲到盒子模型，盒子模型将一个元素本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】的宽高用盒子模式表达出来，包括元素内容的本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】宽高(width)、包含内边距的宽高(p本文作者：唐霜，转载请注明出处。【本文受版权保护】adding)、再向外包含边框粗细的宽高转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】(border-width)、再向外包含【本文受版权保护】本文版权归作者所有，未经授权不得转载。元素外边距的宽高(margin)。

在不同版本的浏览器中，使用css设置wi【未经授权禁止转载】【作者：唐霜】dth值并不一定能得到相同的结果，但现代著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。浏览器基本都统一了盒子模型，所以总体上基未经授权，禁止复制转载。【原创不易，请尊重版权】本不会有差别。

在盒子模型的基础上，jQuery的wid【转载请注明来源】原创内容，盗版必究。th相关方法就可以获取上面所说的四种宽度未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。的任意一种。

width()获取/设置的是元素的内容的【本文受版权保护】著作权归作者所有，禁止商业用途转载。实际宽度。比如我们举一个例子：

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

#test的width就是100px。由转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。于重叠的margin值会被忽略，所以这个著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。盒子实际上最终的外部宽度是100px +原创内容，盗版必究。【作者：唐霜】 10px * 2 + 5px *2 +【未经授权禁止转载】原创内容，盗版必究。 15px[*2]. 如果我们通过$(&【本文受版权保护】著作权归作者所有，禁止商业用途转载。#8216;#test’).【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。width(50)设置元素宽度，只有10【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。0px会变成50px其他值不会发生变化。

#test的innerWidth就是wi【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。dth+padding的宽度，倘若我们使转载请注明出处：www.tangshuang.net【版权所有，侵权必究】用$('#test').innerWidth(150)进行设置，你会发现，上述四个值中，后两个【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。值不会变化，而前面的padding值其实原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net也不会变化，但是它会被计算在变化后的in【转载请注明来源】【本文受版权保护】nerWidth中，所以其实这个时候，w本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。idth会变为130px。

innerWidth不会把边框计算在内，【转载请注明来源】转载请注明出处：www.tangshuang.net但是outerWidth则正好包括边框。【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net例如我们使用$('#test').outerWidth(200)，这个时候要把边框也计算到变化的宽度中，本文作者：唐霜，转载请注明出处。【未经授权禁止转载】因此实际上此时的width值变为了170未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netpx。

使用转载请注明出处：www.tangshuang.netvar outerWidth = $('#test').outerWidth(true)可以获得包括margin在内的整个盒子模【作者：唐霜】【原创内容，转载请注明出处】型外边界的宽度。但是由于margin所在转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。的视界并不会被用于计算变化的宽度，所以我未经授权，禁止复制转载。原创内容，盗版必究。们无法通过这种方法设置整个盒子模型外边界著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】的宽度。但是实际上，我们在实际开发中，会本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】通过先忽略margin后进行计算的方法使原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】用outerWidth来设置盒子宽度。

掌握这个知识点其实很重要，因为我们会经常【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。改变页面中元素的宽度，比如拖拽resiz著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。e等操作，如果在这些特定的场景下心中没有【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。盒子模型，很难得到我们想要的结果。

2016-06-17 4066 jquery, 盒子模型