# 可视区宽高
窗口宽高 - 包含滚动条的宽度
window.innerWidth / window.innerHeight
包含了滚动条的宽度和浏览器本身的边框宽度（低版本IE不支持）。
内容区宽高 - 不包含滚动条的宽度
document.documentElement.clientWidth
document.documentElement.clientHeight不包含滚动条等。
body{
height: 4000px;
}
/*可视区的宽高 兼容ie*/
console.log("不包含滚动条" , document.documentElement.clientWidth );
console.log("包含滚动条", window.innerWidth );
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 元素的各种宽高
# client
clientWidth / clientHeight宽(高)+padding。
<style>
#wrap {
width: 100px;
height: 100px;
background-color: orange;
padding: 20px;
border: 10px solid green;
}
</style>
</head>
<body>
<div id="wrap"></div>
<script>
let oWrap = document.getElementById("wrap");
/*关于wrap的各种宽高*/
console.log(oWrap.clientWidth); //140 width + 左右padding
console.log(oWrap.clientHeight); //140 height + 上下padding
//只读属性，无法设置值
// oWrap.clientWidth = 500;
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# offset
offsetWidth / offssetHeight宽(高)+padding+border。
console.log(oWrap.offsetWidth); //width+左右padding+左右边框
console.log(oWrap.offsetHeight); //height+上下padding+上下边框
//获取元素的最终样式
console.log(getComputedStyle(oWrap).width);//单独获取宽度
console.log(getComputedStyle(oWrap).height);//单独获取高度
console.log(getComputedStyle(oWrap).backgroundColor);
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# scroll （了解）
scrollWidth / scrollHeigh内容的实际高度，当内容没超出相当于client，
当内容超出之后，会得到包括超出内容的实际高度，即使加了超出隐藏，也还是会得到内容所占的实际高度。
/*内容实际占据的宽高，即使有overflow:hidden 也能获取*/
console.log(oWrap.scrollWidth);
console.log(oWrap.scrollHeight);
1
2
3
2
3
# 元素的各种距离
# offsetLeft / offsetTop
获取左边（上边），到最近的带有定位父级的左边（上边）的距离。
<style>
*{
margin: 0;
padding: 0;
}
#wrap{
position: relative;
width: 100px;
height: 100px;
padding: 20px;
border: 10px solid green;
background-color: pink;
margin-top: 40px;
margin-left: 40px;
}
p{
position: absolute;
top: 20px;
width: 50px;
height: 50px;
background-color: purple;
margin: 20px;
}
</style>
</head>
<body>
<div id="wrap">
<p id="para"></p>
</div>
<script>
let oWrap = document.getElementById("wrap");
let oP = document.getElementById("para");
//定位父级
console.log(oWrap.offsetParent);
console.log(oP.offsetTop); //40
console.log(oP.offsetLeft); //20
console.log(oWrap.offsetTop); //40
console.log(oWrap.offsetLeft); //40
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
# getBoundingClientRect()
<节点>.getBoundingClientRect()
兼容 IE8+
返回一个对象，包含了元素各边到窗口的距离，返回的结构类似于：{top:100,left:20,bottom:500,right:890}。
let oWrap = document.getElementById("wrap");
console.log(oWrap.getBoundingClientRect());
1
2
2
oWrap.getBoundingClientRect().left // 元素最左边距离浏览器可视区左边的距离
oWrap.getBoundingClientRect().top // 元素最上边距离浏览器可视区上边的距离
// 下面的不常用
oWrap.getBoundingClientRect().right // 元素最右边距离浏览器可视区左边的距离
oWrap.getBoundingClientRect().bottom // 元素最下边距离浏览器可视区上边的距离
1
2
3
4
5
6
7
2
3
4
5
6
7
# 滚动距离
# 页面滚动宽高(滚动后被卷去的部分)
doucment.documentElement.scrollTop
document.documentElement.scrollLeft
<style>
*{
margin: 0;
padding: 0;
}
body{
width: 3000px;
height: 3000px;
}
#wrap{
width: 600px;
height: 600px;
background-color: pink;
}
</style>
</head>
<body>
<div id="wrap"></div>
<script>
console.log(document.documentElement.scrollTop);
console.log(document.documentElement.scrollLeft);
console.log(window.scrollX); //只读
console.log(window.scrollY);
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
页面的滚动宽（高）。此属性可以赋值，能让页面滚动到指定的位置。
document.onclick = function(){
document.documentElement.scrollTo(
{top: 300 , left: 300 })
}
//等价于window.scrollTo( {top: 300 , left: 300 } );
1
2
3
4
5
2
3
4
5
# 元素的滚动宽高
元素节点.scrollTop 元素节点.scrollLeft
# 兼容性：
document.body.scrollTop = "100" - 无声明头写法
document.documentElement.scrollTop = "100" - 有声明头写法
两种写法兼容与浏览器无关 , 与<!DOCTYPE >声明头的有无有关
document.documentElement.scrollTop = "100" || document.body.scrollTop = "100"
//无声明头 需document.body.scrollTop = "100";
1
2
3
2
3
# 小球运动案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
background-color: #333;
overflow: hidden;
}
* {
margin: 0;
padding: 0;
}
#ball {
position: absolute;
top: 100px;
left: 100px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: orange;
animation: changeColor 2s ease infinite alternate;
}
#shadow p {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: orange;
animation: change 0.5s linear forwards;
transform: scale(1);
opacity: 1;
}
@keyframes change {
from {
transform: scale(1);
opacity: 1;
filter: hue-rotate(0deg);
}
to {
transform: scale(0);
opacity: 0;
filter: hue-rotate(180deg);
}
}
@keyframes changeColor {
from {
filter: hue-rotate(0deg);
box-shadow: 0 0 40px orange;
}
to {
filter: hue-rotate(180deg);
box-shadow: 0 0 40px orange;
}
}
</style>
</head>
<body>
<div id="ball"></div>
<div id="shadow">
<p></p>
</div>
<script>
let oBall = document.getElementById("ball");
let oShdow = document.getElementById("shadow");
//setInterval(function () {
// oBall.style.left = oBall.offsetLeft + 3 + "px";
//}, 60 / 1000);
//计算当前页面可视区的最大宽与最大高
let max_x = document.documentElement.clientWidth - oBall.offsetWidth;
let max_y = document.documentElement.clientHeight - oBall.offsetHeight;
/*当改变窗口大小的时候，这个两个值发生改变*/
window.onresize = function () {
max_x = document.documentElement.clientWidth - oBall.offsetWidth;
max_y = document.documentElement.clientHeight - oBall.offsetHeight;
};
//window.onresize = (function x() {
// maxLeft = document.documentElement.clientWidth - 50;
// maxTop = document.documentElement.clientHeight - 50;
// return x;
//})();
/*速度*/
let speed_x = 10;
let speed_y = 5;
(function m() {
/*变化*/
let left = oBall.offsetLeft + speed_x;
let top = oBall.offsetTop + speed_y;
/*判断大小*/
if (left >= max_x) {
left = max_x;
speed_x = -speed_x;
}
if (left <= 0) {
left = 0;
speed_x = -speed_x;
}
if (top >= max_y) {
top = max_y;
speed_y = -speed_y;
}
if (top <= 0) {
top = 0;
speed_y = -speed_y;
}
/*改变oBall的位置*/
oBall.style.left = left + "px";
oBall.style.top = top + "px";
/*创建阴影函数的执行*/
createShandow(left, top);
requestAnimationFrame(m);
})();
function createShandow(left, top) {
let oP = document.createElement("p");
oP.style.cssText = `left:${left}px ; top:${top}px`;
oShdow.appendChild(oP);
setTimeout(function () {
oShdow.removeChild(oP);
}, 500);
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
← 17-内置数学和时间对象 19-正则表达式 →