1. <!DOCTYPE html>
2. <html>
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>尺寸和位置</title>
8. <style>
9. html,body{
10. height: 100%;
11. }
12. section{
13. width: 300px;
14. height: 300px;
15. background-color: red;
16. margin: 100px auto;
17. border: 20px solid blue;
18. padding: 50px;
19. position: relative;
20. }
21. button{
22. position: absolute;
23. top: 100px;
24. left: 100px;
25. border: 10px solid yellow;
26. margin: 0;
27. }
28. </style>
29. </head>
30. <body>
31. <section>
32. <button>按钮</button>
33. </section>
34. <script>
35. var sec = document.querySelector('section')
36. // alert(sec.clientHeight)
37. // 获取元素的内高度 padding + content
38.
39. // alert(sec.clientTop)
40. // border的尺寸
41.
42. // alert(sec.getBoundingClientRect().bottom)
43. // 这个方法返回一个矩形对象，包含四个属性：left、top、right、bottom
44. // 分别表示元素各边与页面上边和左边的距离
45.
46. var btn =document.querySelector('button')
47. // alert(btn.offsetHeight)
48. // 获取元素外高度 border + padding + content
49.
50. // alert(btn.offsetTop)
51. // 获取元素上偏移量 相对与定位参考元素的距离
52.
53. btn.offsetTop = '60px' //设置它的值是无效的
54. // 改变位置使用以下方式
55. btn.style.top = '200px'
56. btn.style.left = 'auto'
57. btn.style.right = '100px'
58. // alert(btn.offsetTop)
59.
60. // sec.onclick = function(){
61. // btn.scrollIntoView()
62. // // 可以让标签元素滚动到窗口工作区上边缘
63. // }
64. btn.onclick =function(){
65. var popup =document.createElement('div')
66. popup.style.width = '100px'
67. popup.style.height = '100px'
68. popup.style.border = '2px solid yellow'
69. popup.style.position = 'absolute'
70. popup.style.top = btn.offsetTop + btn.offsetHeight + 5 + 'px'
71. popup.style.left = btn.offsetLeft + 'px'
72. sec.appendChild(popup)
73.
74. var close =document.createElement('div')
75. close.style.width = '20px'
76. close.style.height = '20px'
77. close.style.backgroundColor = 'yellow'
78. close.style.position = 'absolute'
79. close.style.top = btn.offsetTop + btn.offsetHeight + 5 -10 + 'px'
80. close.style.left = btn.offsetLeft + popup.offsetWidth - 10 + 'px'
81. close.style.borderRadius = '50%'
82. close.innerText = 'X'
83. close.style.textAlign = 'center'
84. close.style.cursor = 'pointer'
85. sec.appendChild(close)
86.
87. close.onclick =function(){
88. sec.removeChild(popup)
89. sec.removeChild(close)
90. }
91. }
92.
93. // alert(document.documentElement.scrollTop)
94. // alert(document.documentElement.scrollLeft)
95. // 页面滚动的距离 如果没有滚动则为0
96.
97.
98. // alert(document.documentElement.scrollHeight)
99. // alert(document.documentElement.scrollWidth)
100. // 页面自身的高度和宽度
101. // 没有滚动条的时候 页面的宽度和高度等于窗口的宽度和高度
102. // 有滚动条的时候 页面的宽度和高度大于窗口的宽度和高度
103.
104. // document.documentElement.scrollBy(100,100)
105. // 相对于当前位置滚动的距离
106. // document.documentElement.scrollTo(100,100)
107. // 滚动的距离（相当于滚动的起点）滚动到哪个位置
108.
109. // window.scrollByPages(1) //按页滚动
110. // window.scrollByLines(1) //按行滚动
111.
112. // alert(document.documentElement.clientHeight)
113. // alert(document.documentElement.clientWidth)
114. // 窗口工作区的宽度和高度
115.
116. // alert(window.innerWidth)
117. // 窗口内宽度
118. // alert(window.outerWidth)
119. // 窗口的外宽度
120. // 外宽度 - 内宽度 = 滚动条 + 窗口边框
121.
122. // alert(window.outerHeight)
123. // 窗口外高度
124. // alert(window.innerHeight)
125. // 窗口内高度
126. // 外高度 - 内高度 = 窗口标题栏 + 窗口工具栏
127.
128. // alert(window.screen.width)
129. // 屏幕的总宽度
130. // alert(window.screen.height)
131. // 屏幕的总高度
132.
133. // alert(window.screenX)
134. // alert(window.screenY)
135. // 获取窗口左上角的坐标
136.
137. alert(window.screen.availHeight)
138. // 屏幕可用高度（扣除任务栏）
139. alert(window.screen.availWidth)
140. // 屏幕可用宽度（扣除任务栏）
141. </script>
142. </body>
143. </html>
推荐资料：JavaScript中的各种宽高属性