clientWidth,srollWidth,offsetWidth
一、基本概念
1.document.documentElement.clientWidth:可视区屏幕宽度(你能看到的页面部分,不含滚动条)
2.document.documentElement.scrollWidth:内容可滚动宽度(不只是你能看到的部分,不含滚动条)
3.document.documentElement.offsetWidth:元素的内容宽度(不只是你能看到的部分,含滚动条/包含border)
4.window.innerWidth:窗口用来显示页面内容的宽度(包含滚动条,注意是浏览器窗口不是html页面,与页面无关)
5.window.outerWidth:窗口的整个实际宽度(包含你查看console.log时这样的控制台边栏)
二、大小对比
1.html默认,scrollWidth分内容超出页面可视区和不超出;
超出时:scrollWidth > offsetWidth >= clientWidth(很多页面不知有什么操作,元素内容明明超出可视区offsetWidth却等于clientWidth?)
不超出时:offsetWidth > scrollWidth = clientWidth
scrollWidth超出时,如果有margin也会加且仅加左侧的margin值,说白了就是一个节点可以在滚动条里滚动的宽度
2.document.documentElement.offsetWidth:指向html这个元素盒模型的宽度;(不包含margin谢谢)
就是html这个节点的大小,你可以手动改写宽度小于可视区,加上边线也不超过可视区,此时offsetWidth小于clientWidth&scrollWidth;
3.另附:关于height
①一个节点的height不包括它的padding、border
②然后innerHeight是包含了padding的高度值
③然后outerHeight是包含了padding + border的高度值