JavaScript获取网页宽高

1、网页可视区域宽高

let clientWidthHeight = () => ({ clientWidth: document.body.clientWidth, clientHeight: document.body.clientHeight, }), { clientWidth, clientHeight } = clientWidthHeight(); console.log("网页可视区域宽高：", clientWidth, clientHeight); 

2、包括边线的网页可视区域宽高

let offsetWidthHeight = () => ({ offsetWidth: document.body.offsetWidth, offsetHeight: document.body.offsetHeight, }), { offsetWidth, offsetHeight } = offsetWidthHeight(); console.log("包括边线的网页可视区域宽高：", offsetWidth, offsetHeight); 

3、网页正文全文宽高

let scrollWidthHeight = () => ({ scrollWidth: document.body.scrollWidth, scrollHeight: document.body.scrollHeight, }), { scrollWidth, scrollHeight } = scrollWidthHeight(); console.log("网页正文全文宽高：", scrollWidth, scrollHeight); 

4、网页被卷去的高左

let scrollTopLeft = () => ({ scrollTop: document.body.scrollTop, scrollLeft: document.body.scrollLeft, }), { scrollTop, scrollLeft } = scrollTopLeft(); console.log("网页被卷去的上左：", scrollTop, scrollLeft); 

5、网页正文部分上左

let screenTopLeft = () => ({ screenTop: window.screenTop, screenLeft: window.screenLeft, }), { screenTop, screenLeft } = screenTopLeft(); console.log("网页正文部分上左：", screenTop, screenLeft); 

6、屏幕分辨率的宽高

let widthHeight = () => ({ width: window.screen.width, height: window.screen.height, }), { width, height } = widthHeight(); console.log("屏幕分辨率的宽高：", width, height); 

7、屏幕可用工作区宽高

let availWidthHeight = () => ({ availWidth: window.screen.availWidth, availHeight: window.screen.availHeight, }), { availWidth, availHeight } = availWidthHeight(); console.log("屏幕可用工作区宽高：", availWidth, availHeight); 

8、相关链接

博客园-原文