JavaScript中的top、left、width、Height详解

分手后的思念是犯贱 2022-08-13 00:36 170阅读 0赞

来源：[http://www.ido321.com/911.html][http_www.ido321.com_911.html]

html代码

1: <body>

2:     <div class="father" id="father">

3:         <h3>这是父元素，屏幕分辨率是1366*768</h3>

4:         <div class="son" id="son">

5:             <h3>这是子元素，祝大家国庆快乐 </h3>

6:             <div class="grandson" id="grandson">

7:                 <h3>这是孙子元素，祝大家国庆快乐 </h3>

8:                 <h3>我的博客:www.ido321.com</h3>

9:                 <h3>程序爱好者QQ群:</h3>

10:                 <h3>259280570  </h3>

11:                 <h3>欢迎你加入 </h3>

12:                 <h3>国庆快乐  </h3>

13:             </div>

14:         </div>

15:     </div>

16:     <div class="data">

17:         <h3>数据输出</h3>

18:         <div id="data"></div>

19:     </div>

20: </body>

css

1: *

2:     {

3:         margin: 0 auto;

4:     }

5:     .father

6:     {

7:         width: 500px;

8:         height: 750px;

9:         border: 5px solid red;

10:         float: left;

11:     }

12:     .son

13:     {

14:         width: 400px;

15:         height: 300px;

16:         border: 5px solid black;

17:         margin: 20px;

18:     }

19:     .grandson

20:     {

21:         width: 150px;

22:         height: 100px;

23:         border: 5px solid blue;

24:         margin: 20px;

25:         overflow: auto;

26:     }

27:     .data

28:     {

29:         width: 600px;

30:         height: 750px;

31:         border: 5px solid red;

32:         float: left;

33:         margin-left: 15px;

34:     }

js:

1: window.onload = function()

2:     {

3:         /*获取元素对象*/

4:         var father = document.getElementById('father');

5:         var son = document.getElementById('son');

6:         var grandson = document.getElementById('grandson');

7:         var data = document.getElementById('data');

8:         data.innerHTML = "<h3>获取视窗大小(跟窗口大小有关)</h3>";

9:         data.innerHTML += "document.body可见区域宽: "+document.body.clientWidth+"<br/>";

10:         data.innerHTML += "document.body可见区域高: "+document.body.clientHeight+"<br/>";

11:         data.innerHTML += "window.innerWidth可见区域宽: "+window.innerWidth+"<br/>";

12:         data.innerHTML += "window.innerHeight可见区域高: "+window.innerHeight+"<br/>";

13:         data.innerHTML += "document.documentElement可见区域宽: "+document.documentElement.clientWidth+"<br/>";

14:         data.innerHTML += "document.documentElement可见区域高: "+document.documentElement.clientHeight+"<br/>";

15:         data.innerHTML += "<h3>获取元素自身大小(跟是否有滚动条无关)</h3>";

16:         data.innerHTML += ".son自身宽度(offsetWidth属性，包括左右边框)："+son.offsetWidth+"<br/>";

17:         data.innerHTML += ".son自身高度(offsetHeight属性，包括上下边框)："+son.offsetHeight+"<br/>";

18:         data.innerHTML += ".son可视宽度(clientWidth属性，不包括左右边框)："+son.clientWidth+"<br/>";

19:         data.innerHTML += ".son可视高度(clientHeight属性，不包括上下边框)："+son.clientHeight+"<br/>";

20:         data.innerHTML += "<h3>获取.grandson滚动大小和可视大小</h3>";

21:         data.innerHTML += ".grandson滚动宽度(scrollWidth属性)："+grandson.scrollWidth+"<br/>";

22:         data.innerHTML += ".grandson滚动高度(scrollHeight属性)："+grandson.scrollHeight+"<br/>";

23:         data.innerHTML += ".grandson可视宽度(clientWidth属性，不包括竖直滚动条和border)："+grandson.clientWidth+"<br/>";

24:         data.innerHTML += ".grandson可视高度(clientHeight属性，不包括水平滚动条和border)："+grandson.clientHeight+"<br/>";

25:         data.innerHTML += "<h3>获取.grandson被卷去的大小(跟滚动条的位置有关)</h3>";

26:         data.innerHTML += ".grandson被卷去的高(scrollTop属性，竖直滚动条滑到最底端)："+grandson.scrollTop+"<br/>";

27:         data.innerHTML += ".grandson被卷去的左(scrollLeft属性，水平滚动条滑到最右端)："+grandson.scrollLeft+"<br/>";

28:         data.innerHTML += "<h3>获取浏览器窗口位置(跟窗口大小有关)</h3>";

29:         /*

30:         *IE、Chrome、Safari、Opera 都提供了支持 window.screenLeft 和 *window.screenTop，但是Firxfox不支持这个两个属性；

31:         *Firxfox、Chrome、Safari、Opera 都提供了支持 window.screenX *和 window.screenY，但是 IE 不支持这个两个属性；

32:         */

33:         var leftPos = (typeof window.screenLeft == 'number')?window.screenLeft:window.screenX;

34:         var topPos = (typeof window.screenTop == 'number')?window.screenTop:window.screenY;

35:         data.innerHTML += "body网页正文部分上(window.screenTop(Y))："+ topPos+"<br/>";

36:         data.innerHTML += "body网页正文部分左(window.screenLeft(X))："+ leftPos+"<br/>";

37:         data.innerHTML += "<h3>获取屏幕分辨率</h3>";

38:         data.innerHTML += "屏幕分辨率的高(window.screen.height)："+ window.screen.height+"<br/>";

39:         data.innerHTML += "屏幕分辨率的宽(window.screen.width)："+ window.screen.width+"<br/>";

40:         data.innerHTML += "<h3>获取屏幕可用的高宽</h3>";

41:         data.innerHTML += "屏幕分辨率的高(window.screen.availHeight)："+ window.screen.availHeight+"<br/>";

42:         data.innerHTML += "屏幕分辨率的宽(window.screen.availWidth)："+ window.screen.availWidth+"<br/>";

43:         data.innerHTML += "<h3>获取.father的边框大小</h3>";

44:         data.innerHTML += ".father上边框(clientTop)："+ father.clientTop+"<br/>";

45:         data.innerHTML += ".father左边框(clientLeft)："+ father.clientLeft+"<br/>";

46:         data.innerHTML += "<h3>获取.son到父元素边界的距离(即对应margin+父元素对应的border)</h3>";

47:         data.innerHTML += ".son到父元素上边界(offsetTop)："+ son.offsetTop+"<br/>";

48:         data.innerHTML += ".son到父元素左边界(offsetLeft)："+ son.offsetLeft+"<br/>";

49:     }

ps：浏览器对盒子的解析存在差异，所以以上得出的数据也会存在小小差异。附图一张  
![SouthEast][]

演示地址： [http://ido321.qiniudn.com/test.html][http_ido321.qiniudn.com_test.html]

关于获取视窗大小的区别： [http://www.ido321.com/906.html][http_www.ido321.com_906.html]

[  
][http_www.ido321.com_911.html]

[http_www.ido321.com_911.html]: http://www.ido321.com/911.html
[SouthEast]: /images/20220810/756eb047fbbb43499c7b655951aa0e1f.png
[http_ido321.qiniudn.com_test.html]: http://ido321.qiniudn.com/test.html
[http_www.ido321.com_906.html]: http://www.ido321.com/906.html