Js获取宽高度的归纳总结

时间：2024-09-27 22:05:50

首先，先吓唬一下我们的小白们！在js中的描述宽高的可以细分有22种。

  1. window.innerWidth //除去菜单栏的窗口宽度
  2. window.innerHeight//除去菜单栏的窗口高度
  3. window.outerWidth//包括菜单栏的窗口宽度
  4. window.outerHeight//包括菜单栏的窗口宽度
  5. window.screen.height//电脑屏幕的高度
  6. window.screen.width//电脑屏幕的宽度
  7. window.screen.availHeight//电脑屏幕的可利用高度
  8. window.screen.availWidth//电脑屏幕的可利用宽度
  9. window.screenTop//浏览器距离屏幕的高度
  10. window.screenLeft//浏览器距离屏幕的宽度
  11. document.body.clientWidth//指元素的自身宽度（包括padding）
  12. document.body.clientHeight//指元素的自身的高度（包括padding）
  13. document.body.clientLeft//子级div内容位置到父级内容区域的宽度距离(即border值)
  14. document.body.clientTop//子级div内容位置到父级内容区域的高度距离(即border值)
  15. document.body.offsetWidth//指定元素的宽度（包括padding，border和内容）
  16. document.body.offsetHeight//指定元素的高度（包括padding，border和内容）
  17. document.body.offsetTop//距离父级元素的高度
  18. document.body.offsetLeft//距离父级元素的宽度
  19. document.body.scrollWidth//获取的是文档的宽度（当指定的宽度小于浏览器窗口的时候，为浏览器的宽度）
  20. document.body.scrollHeight//获取的是文档的高度（当指定的高度小于浏览器窗口的时候，为浏览器的高度）
  21. document.body.scrollTop//文档被滚动上去的时候（即滚动条往上滚动的距离）
  22. document.body.scrollLeft//文档被滚动右去的时候（即滚动条往右滚动的距离）

看起来有点怕怕，但我们细分可以很清晰的分清楚他们

  • width和height的都是值元素或窗口等的宽高，top和left表示的是到相对元素的距离
  • client,offset,scrollh和screen都分别有width，height，top和left
  • 最后就是区别窗口和屏幕的宽高和元素的宽高

我们先从上往下去分析每一个的作用

Js获取宽高度的归纳总结

innerHeight/Width

outerHeight/Width

Screen屏幕宽高

首先我们先分清楚widnow和document的区别

 window 整个窗口

 document 除了顶头的菜单栏

 document对象是window对象的一部分

话不多说，直接上图

Js获取宽高度的归纳总结

Js获取宽高度的归纳总结

offset

document.body.offsetWidth
document.body.offsetHeight
指定元素的border+padding+内容的宽度和高度

如果没有padding和border
offsetWidth = clientWidth

兼容性问题
IE6/7中（微软已经不提供支持）
offsetLeft = (offsetParent的padding-left)+(当前元素的margin-left)

IE8以上
offsetLeft = (offsetParent的margin-left)+(当前元素的margin-left)

火狐中
offsetLeft = (offsetParent的margin-left)+(当前元素的margin-left)+(offsetParent的padding-left)

Js获取宽高度的归纳总结

client

指定元素的宽度和高度 即内容+padding

如果没有滚动条，即元素本身设定的宽度
如果出现滚动条，滚动条会遮盖元素宽高，那么，该属性就是其本来宽高减去滚动条的宽度
console.log( document.body.clientHeight);
console.log(document.body.clientWidth);

读取元素border的宽度和高度（子级内容区域到父级内容区域的距离）
document.body.clientLeft
document.body.clientTop

Js获取宽高度的归纳总结

scroll

谷歌浏览器下

  • 当指定的宽高小于浏览器窗口的时候
    • scrollWidth为浏览器的宽度
    • scrollHeight为浏览器的高度
  • 当给的宽高大于浏览器窗口，且内容小于给定的宽高时
    • scrollWidth给定的宽度+padding、margin和border
    • scrollHeight给定的宽度+padding、margin和border
  • 当给定的宽高大于浏览器窗口，且内容大于给定的宽高
    • scrollWidth内容宽度+所有的padding,margin和border
    • scrollHeight内容高度+所有的padding,margin和border

属性时可读写的

指当元素其中的内容超出其宽高的时候，元素被卷起的高度和宽度

Js获取宽高度的归纳总结

Js获取宽高度的归纳总结

懒加载思路

在还没有这个技术的出现时，页面的所有内容和图片，都会在访问时一次性的加载出来，对于浏览器和服务器都是一种负担，如果想百度图片这样的图库，用手机来看，多少流量都是浪费。这样的用户体验不仅差，还给服务器增加负担。所以懒加载技术才酝酿出来。

懒加载技术的要点是通过滚动事件触发判断

元素到顶部的距离小于       <=      可视区域 client（满足条件后触发加载后台内容）

底部加载技术
scrollTop+可视区域 == 网页高度 scrollHeight（满足条件后触发加载后台内容）

一天多写一点点，一天多积累一点点！

（完！）

相关文章