jquery中获取元素真实宽度的深度解析

jquery中的Width获取值的不同，因为盒子模型通常分为两种。我这边给统一分成了两类，为解决电脑端和手机端的兼容性不同，因为box-sizing是css3中的一个属性，ie低版本不支持，为了避免兼容性问题，所以电脑端，统一用content-box,这个也是默认的，各个浏览器都支持的，而手机端设计，统一使用border-box.即电脑端设置或不设置均使用box-sizing:content-box;手机端，显示设置box-sizing:border-box;下面列表获取在不同的显示模式下获取width的值的异同和显示的问题。

css样式：

查看地址：http://www.sjmoban.com/study/jquery/width.html

.box1{width:300px;height: 100px;background-color:red;color:white;}

.box2{width:300px;height: 100px;background-color:red;color:white;padding:10px;}

.box3{width:300px;height: 100px;background-color:red;color:white;padding:10px;border:20px solid yellow;}

box-sizing	border-boxbox1,box2,box3	content-boxbox1,box2,box3
width()	300,280,240	300,300,300
innerWidth()	300,300,260	300,320,320
outerWidth()	300,300,300	300,320,360
综上所述：

想获取元素所占的真实体积，需要使用outerWidth()这个函数，如果元素设置了margin,则使用outerWidth(true),即加入了true这个参数，包含了参数。最保险的做法，就是outerWidth(true)

转载请注明：jquery中获取元素真实宽度的深度解析 - 编程知识库