JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)

首先，我们需要了解一些基础知识，如何获取屏幕宽度和高度，浏览器窗口大小，以及网页的高度和宽度。在JavaScript中，我们可以使用以下方法获取这些信息：

获取屏幕宽度和高度：

// 获取屏幕宽度和高度
var screenWidth = window.screen.width;
var screenHeight = window.screen.height;
console.log("屏幕宽度：" + screenWidth);
console.log("屏幕高度：" + screenHeight);

获取浏览器窗口大小：

// 获取浏览器窗口大小
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
console.log("窗口宽度：" + windowWidth);
console.log("窗口高度：" + windowHeight);

获取网页的高度和宽度：

// 获取网页高度和宽度
var pageWidth = document.documentElement.scrollWidth;
var pageHeight = document.documentElement.scrollHeight;
console.log("网页宽度：" + pageWidth);
console.log("网页高度：" + pageHeight);

示例1： 当我们需要获取浏览器窗口大小，以便根据窗口大小的差异性，选择恰当尺寸的图片时，使用示例2中的代码获取浏览器窗口的大小信息

示例2： 当我们需要通过JS滚动窗口，并返回当前浏览器窗口卷去的距离时，通过以下代码获取网页高度,并计算出浏览器卷去的距离：

// 获取网页高度和计算卷去距离
var docHeight = document.documentElement.offsetHeight;
var self = this;
window.onscroll = function() {
  console.log("卷去的距离：" + self.getScrollTop());
}
getScrollTop = function() {
  return document.documentElement.scrollTop || document.body.scrollTop;
}

此时便可以在控制台中输出浏览器卷去的距离值。