-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindextest.html
66 lines (55 loc) · 1.89 KB
/
indextest.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
<!--
* @Author: underworld02 [email protected]
* @Date: 2024-11-16 17:12:25
* @LastEditors: underworld02 [email protected]
* @LastEditTime: 2024-12-18 19:22:31
* @FilePath: \wechat-master\indextest.html
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html>
<head>
<style>
#box {
box-sizing: content-box;
width: 200px;
height: 200px;
padding: 20px;
margin: 20px;
border: 2px solid black;
overflow: scroll;
}
#content {
margin: 10px;
border: 1px solid black;
padding: 20px;
width: 400px;
height: 400px;
}
</style>
<div id="box">
<div id="content"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded',function(){
var box = document.getElementById('box');
console.log('offsetWidth:', box.offsetWidth); // 244 (200 + 20 + 20 + 2 + 2)
console.log('offsetHeight:', box.offsetHeight); // 244 (200 + 20 + 20 + 2 + 2)
console.log('clientWidth:', box.clientWidth); // 240 (200 + 20 + 20 -7)
console.log('clientHeight:', box.clientHeight); // 240 (200 + 20 + 20 -7)
console.log('scrollWidth:', box.scrollWidth); // 440 (content+padding的宽度)
console.log('scrollHeight:', box.scrollHeight); // 440 (content+padding的高度)
console.log('=================================');
console.log('');
});
document.addEventListener('click',function(e){
var box = document.getElementById('box');
let client = box.getBoundingClientRect();
console.log(client.clientX);//undef
console.log(client.x);
console.log(client.left);
console.log(client.width);
});
</script>
</body>
</html>