详解javascript中offsetTop/Left、offsetWidth/Height、clientWidth/clientHeight

javascript中获取元素的尺寸位置等,有好多个属性(clientWidth,clientHeight,offsetWidth,offsetHeight,scrollWidth,scrollHeight)等,本文主要介绍各自属性的意义。



详解javascript中offsetTop/Left、offsetWidth/Height、clientWidth/clientHeight_第1张图片

一、对于获取div尺寸

clientWidth = width + padding


clientHeight = height + padding


offsetWidth = width + padding + border


offsetHeight = height + padding + border

二、对于获取整个网页尺寸

网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽IE8,chrome中=clientWidth)
网页可见区域高: document.body.offsetHeight (包括边线的高IE8,chrome中=scrollHeight)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth

三、测试例子




	
	Document

	

	


	



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

结果截图:
详解javascript中offsetTop/Left、offsetWidth/Height、clientWidth/clientHeight_第2张图片

你可能感兴趣的:(JavaScript,开发)