Sekyoro的博客小屋
·
浏览器JS
💡
原文中文，约2700字，阅读约需7分钟。
📝
内容提要
本文介绍了浏览器常用的JavaScript方法，包括获取元素尺寸属性和与其他元素的距离，如可视部分尺寸、占据尺寸、滚动尺寸等。还介绍了获取可视区域、滚动条距离、屏幕分辨率、浏览器尺寸等方法。最后提到了获取矩形元素界线和滚动到可视区域的方法。
🎯
关键要点
- 本文介绍了浏览器常用的JavaScript方法，主要涉及元素的尺寸属性和与其他元素的距离。
- 获取元素尺寸属性包括clientWidth、clientHeight、offsetWidth、offsetHeight、scrollWidth和scrollHeight等。
- clientWidth和clientHeight获取元素可视部分的宽度和高度，不包括边框和滚动条。
- offsetWidth和offsetHeight获取元素在页面中占据的总宽度和高度，包括边框和滚动条。
- scrollWidth和scrollHeight获取元素的总宽度和高度，适用于overflow:visible样式。
- 获取可视区域的宽高可以使用document.documentElement.clientWidth和clientHeight，但在老IE浏览器上不适用。
- 获取滚动条距离的方法为document.body.scrollTop或document.documentElement.scrollTop。
- 屏幕分辨率可以通过window.screen.height和window.screen.width获取，工作区域的宽高通过availHeight和availWidth获取。
- 浏览器的宽高可以通过window.outerHeight和window.outerWidth获取，innerHeight和innerWidth不包括工具栏。
- getBoundingClientRect()方法获取矩形元素的界线，scrollIntoView()方法让元素滚动到可视区域。
➡️
