区分width()、css('width')、innerWidth() 

 1 #widthTest1 {
 2 width: 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 width: 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 });

 

posted @ 2017-01-02 12:18  芒果酱-Jessie  阅读(1522)  评论(0)    收藏  举报