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>
