1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7 *{
8 padding: 0;
9 margin: 0;
10 }
11 #box{
12 width: 100px;
13 height: 100px;
14 padding: 10px;
15 border: 10px solid red;
16 text-align: center;
17 overflow: scroll;
18
19 }
20 #child{
21 width: 500px;
22 height: 500px;
23 padding: 5px;
24 border: 5px solid green;
25 display: inline-block;
26 /*background: ;*/
27 }
28 </style>
29 </head>
30 <body>
31 <div id="box">
32 <div id="child">
33 <div id="sonChild"> </div>
34 </div>
35 </div>
36
37
38
39 <ul id = "list">
40 <li>1</li>
41 <li>2</li>
42 <li>3</li>
43 </ul>
44 </body>
45
46 <script type="text/javascript">
47 // 获取上面俩个元素
48 var box = document.getElementById("box");
49 var child = document.getElementById("child");
50
51 // 一、关于元素大小的问题
52 //1、clientWidth 元素内容区宽度加左右内边距宽度
53 console.log(box.clientWidth); //120
54 // 2、clientHeight 元素内容区高度加上下内边距高度
55 console.log(box.clientHeight);
56 /* 3、offsetWidth
57 元素水平方向所占空间，包括元素宽度、垂直滚动条宽度、边框宽度，以像素为单位
58 * */
59 console.log(box.offsetWidth);
60 /* 4、offsetHeight
61 * *offsetHeight 元素垂直方向所占空间，
62 * 包括元素高度、水平滚动条高度、边框高度，以像素为单位
63 */
64 console.log(child.offsetHeight);
65 /*5、
66 * offsetLeft
67 * 元素左外边框到包含元素的左外边框之间的像素距离
68 */
69 //console.log(child.offsetLeft);
70 /*6
71 * offsetTop
72 元素上外边框到包含元素的上外边框之间的像素距离
73 * */
74 console.log(child.offsetTop);
75
76 /*
77 * 7、offsetParent 指向距离当前元素最近的一个父节点
78 */
79 console.log(child.scrollHeight);
80
81
82 /*8、scrollLeft
83 被隐藏在内容(不包括padding)区域左侧的像素数，通过设置这个属性可以改变元素的滚动位置
84 * */
85 // box.scrollLeft = 20;
86 // setTimeout(function(){
87 // console.log(box.scrollLeft);
88 // },3000);scrollTop 被隐藏在内容区域上方的像素数，通过设置这个属性可以改变元素的滚动位置
89
90 /*
91 9、scrollTop 被隐藏在内容区域上方的像素数，
92 通过设置这个属性可以改变元素的滚动位置
93 * */
94 box.scrollTop = 10;
95 console.log(box.scrollTop);
96
97
98
99 // style
100
101 // box.style 设置标准浏览器
102 // 修改 width
103 //标准浏览器
104 // box.style.width = "200px";
105 // // IE
106 // box.currentStyle.width = "200px";
107
108
109
110
111 //
112 var list = document.getElementById("list");
113 // console.log(list.firstChild);
114
115 //DOM 扩展
116 //1、firstElementChild 第一个子元素
117 // console.log(list.firstElementChild);
118 // 2、children ----childNodes
119 //console.log(list.childNodes); // 7
120 //console.log(list.children); // 3
121 // 3、nextElementSibling
122 //console.log(box.nextSibling);
123 //console.log(box.nextElementSibling);
124
125 </script>
126 </html>