js获取网页宽高

Posted 2021-12-10 web半晨

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js获取网页宽高相关的知识，希望对你有一定的参考价值。

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);