1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script type="text/javascript" src="../jquery-1.12.4.min.js"></script> 7 <script type="text/javascript"> 8 $(function(){ 9 alert($('.box').width()); 10 alert($('.box').height()); 11 // 获取属性宽和高的值 12 13 alert($('.box').innerWidth()); 14 alert($('.box').innerHeight()); 15 16 // 包括padding的width和height值； 17 18 alert($('.box').outerWidth()); 19 alert($('.box').outerHeight()); 20 // 包括padding和border的width和height值，即盒子的真实尺寸； 21 22 alert($('.box').outerWidth(true)); 23 alert($('.box').outerHeight(true)); 24 // 包括padding和border和margin的width和height值； 25 26 }); 27 </script> 28 <style type="text/css"> 29 .box{ 30 height: 200px; 31 width: 200px; 32 padding: 20px; 33 border: 10px solid #000; 34 margin: 20px; 35 background-color: gold; 36 } 37 </style> 38 </head> 39 <body> 40 <div class="box"></div> 41 </body> 42 </html>