client家族

 1 <html lang="en">
 2 
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>client家族</title>
 8     <style>
 9         #box {
10             width: 200px;
11             height: 200px;
12             background-color: red;
13             padding: 20px;
14             border: 10px solid #000;
15         }
16     </style>
17 </head>
18 
19 <body>
20     <!-- 
21   网页可见区域宽度 :document.body.client.width
22  网页可见区域高度 :documnet.body.client.width
23 offset 
24   -->
25     <div id="box">
26 
27 
28     </div>
29     <script>
30         var box = document.getElementById("box");
31         //1.width 和 height
32         //border + padding +内容的宽度和高度
33         /* console.log(box.offsetWidth, box.offsetHeight);
34          //padding + 内容的宽度和高度
35          console.log(box.clientWidth, box.clientHeight);
36          //能够滚动的内容的 宽度 和 高度
37          console.log(box.scrollWidth, box.scrollHeight)*/
38 
39         //2. top 和 left
40         //当前元素距离有定位的父盒子左边的 距离 :offsetTop :当前元素距离有定位的
41         //父盒子上边的距离
42         console.log(box.offsetLeft, box.offsetTop);
43         //clientLeft:左边边框的宽度 ; clientTop :上边边框的宽度
44         console.log(box.clientLeft, box.clientTop);
45         //scrollLeft:左边滚动的长度;scorllTop:上边滚动的长度;
46         console.log(box.scrollLeft, box.scrollTop)
47     </script>
48 </body>
49 
50 </html>