JQuery-- 获取元素的宽高、获取浏览器的宽高和垂直滚动距离

时间:2020-12-31 21:09:24
1  *  能够使用jQuery设置尺寸
2          *  .width()           width
3          *  .innerWidth()      width + padding
4          *  .outerWidth()      width + padding + border
5          *  .outerWidth(true)  width + padding + border + margin
6          *  能够使用jQuery操作坐标
7          *  .offset() 永远基于网页文档(document)获取
8          *  .position() 基于定位的祖先元素(offsetParent)获取

demo

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .box{
 8             width: 200px;
 9             height: 200px;
10             background-color: palegreen;
11             padding:20px;
12             border: 10px solid darkcyan;
13             margin: 50px;
14         }
15     </style>
16     <script src="lib/jquery-1.12.2.js"></script>
17 
18 </head>
19 <body>
20      <div class="box">
21          width: 200px<br/>
22          height: 200px<br/>
23          padding:20px<br/>
24          border: 10px solid darkcyan<br/>
25          margin: 50px<br/>
26 
27      </div>
28 </body>
29 </html>
30 <script>
31     console.log(".css('width')获取盒子宽度=width:"+$('.box').css('width'));
32     console.log("width()获取盒子宽度= width :"+$('.box').width());
33     console.log("innerwidth()获取盒子宽度= width + padding :"+$('.box').innerWidth());
34     console.log("outerWidth()获取盒子宽度=  width + padding + border:"+$('.box').outerWidth());
35     console.log("outerWidth(true)获取盒子宽度= width+ padding + border + margin:"+$('.box').outerWidth(true));
36 
37 
38 
39 </script>