第十四节 jQuery获取元素尺寸

 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>