1 #widthTest1 { 2 200px; 3 height: 200px; 4 background-color: #00CCFF; 5 -webkit-box-sizing: border-box; 6 -moz-box-sizing: border-box; 7 box-sizing: border-box; 8 padding: 10px; 9 border: 5px solid red; 10 } 11 12 #widthTest2 { 13 margin-top: 30px; 14 200px; 15 height: 200px; 16 background-color: #00CCFF; 17 padding: 10px; 18 border: 5px solid red; 19 } 20 <div id="widthTest1">width test1</div> 21 <div id="widthTest2">width test2</div>
1 $(function(){ 2 // .width()总是返回内容宽度,不管CSS box-sizing属性值. 3 // 截至jQuery 1.8,这可能需要检索的CSS的宽度加加上box-sizing的属性, 4 // 然后当元素有 box-sizing: border-box时候,减去个元素上任何潜在border和padding值。 5 // 为了避免这种问题,使用.css( "width" )而非.width()。 6 console.log('widthTest1 .width()'+$('#widthTest1').width()); // 170 7 console.log('widthTest2 .width()'+$('#widthTest2').width()); // 200 8 //第一个内容宽度是170 第二个内容宽度是200 两者主要区别是box-sizing:border-box; 9 10 11 // innerWidth() 包括padding,但是不包括border。 12 console.log('widthTest1 .width()'+$('#widthTest1').innerWidth()); // 190 = 200 - 5*2 13 console.log('widthTest1 .width()'+$('#widthTest2').innerWidth()); // 220 = 200 + 20 14 15 16 console.log('widthTest1 css("width")'+$('#widthTest1').css('width')); // 200px 17 console.log('widthTest2 css("width")'+$('#widthTest2').css('width')); // 200px 18 });