clientWidth、offsetWidth、scrollWidth区别
clientWidth
clientWidth
包括了元素的内边距(padding)和实际内容的宽度content
offsetWidth
offsetWidth
包括了元素的边框(border)、内边距(padding)、滚动条(scroll)、元素的实际内容的宽度content
scrollWidth
scrollWidth
包括了元素的实际内容的宽度visible+invisible,但不包括边框(border)、内边距(padding)和滚动条(如果有)
例如,如果一个元素的宽度为 300px,边框为 2px,内边距为 10px,内容实际宽度为 500px,没有垂直滚动条,那么它的 scrollWidth
就是 500px
window.innerWidth
表示浏览器窗口的内部宽度,即浏览器可视区域的宽度,不包括滚动条的宽度。它可以通过 window.innerWidth 来获取
window.outerWidth
表示浏览器窗口的外部宽度,包括浏览器的边框和滚动条的宽度。它可以通过 window.outerWidth 来获取
getBoundingClientRect 真正的可见尺寸 包括transform:scale(2)