1、scrollHeight、clientHeight、offsetHeight
The
Element.scrollHeightread-only property is a measurement of the height of an element's content, including content not visible on the screen due to overflow.
TheElement.clientHeightread-only property is zero for elements with no CSS or inline layout boxes, otherwise it's the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin.
TheHTMLElement.offsetHeightread-only property is the height of the element including vertical padding and borders, as an integer.
1、如果没有滚动条，scrollHeight 的高度跟 clientHeight 的高度相同。
利用这个特点，可以判断这个元素有没有出现（垂直）滚动条
if (Element.scrollHeight > Element.clientHeight) {
// 可以解决模态框出现/消失的抖动
// document.documentElement.style.marginRight = `15px`
// document.documentElement.style.overflow = `15px`
}
2、三者都包括 padding , 但 offsetHeight 包括 border ，scrollHeight、clientHeight 不包括border
3、上面三个值都是整数 而且都是只读属性 ，获取更精确的数值，可以使用
element.getBoundingClientRect()。
2、window.innerWidth、window.outerWidth
window.innerWidthis width of the browser window viewport including, if rendered, the vertical scrollbar
Window.outerWidthgets the width of the outside of the browser window. It represents the width of the whole browser window including sidebar (if expanded), window chrome and window resizing borders/handles.
-
1、这两个是 window 的属性，前者是视口的高度（不准确），后者是这个浏览器的高度。
-
2、
document.documentElementhtml文档的根元素
document.documentElement.clientWidth表示的是视口的宽度，并非<html>的宽度。区别可以通过设置html { width: 10%; } // 用这个CSS很容易理解viewport和<html>元素的区别： // viewport处于 `html`的外层，是无法css设置的document.documentElement.clientWidth与window.innerWidth的区别在于是否包含滚动条。window.innerWidth是包含滚动条的。所以👆说不准确。document.documentElement.clientWidth才是真正的视口的宽度。测量<html>可以用
document.documentElement.offsetWidth/Height -
3、
window.resize()是可以改变window的大小的。
网友评论