JS之获取屏幕宽高、浏览器宽高、网页内容宽高

前端

2023-12-11 07:28:22

前言

平时在写界面获取屏幕、浏览器宽高时，经常会搞不清楚window、body、screen中的clientWidth、offsetWidth、width的区别，今天做一个总结帮助自己理解。

window

window是浏览器中JavaScript的顶层对象，所有全局变量与函数都是window对象或者window对象的属性或方法。

window对象有以下几个属性：

innerWidth ：浏览器窗口的内部宽度，不包括工具栏和滚动条。
innerHeight ：浏览器窗口的内部高度，不包括工具栏和滚动条。
outerWidth ：浏览器窗口的外部宽度，包括工具栏和滚动条。
outerHeight ：浏览器窗口的外部高度，包括工具栏和滚动条。
screenX ：浏览器窗口在屏幕上的水平位置。
screenY ：浏览器窗口在屏幕上的垂直位置。

window对象也有以下几个方法：

alert() ：显示一个警告对话框。
confirm() ：显示一个确认对话框。
prompt() ：显示一个带输入框的对话框。
open() ：打开一个新的窗口或选项卡。
close() ：关闭当前窗口或选项卡。

body

body元素是HTML文档的主体部分，它包含了网页的主要内容。

body元素有以下几个属性：

clientWidth ：body元素的内部宽度，不包括滚动条。
clientHeight ：body元素的内部高度，不包括滚动条。
scrollWidth ：body元素的滚动宽度，包括隐藏的内容。
scrollHeight ：body元素的滚动高度，包括隐藏的内容。

screen

screen对象表示显示器屏幕。

screen对象有以下几个属性：

width ：屏幕的宽度。
height ：屏幕的高度。
availWidth ：屏幕的可用宽度，不包括任务栏和工具栏。
availHeight ：屏幕的可用高度，不包括任务栏和工具栏。
colorDepth ：屏幕的颜色深度。
pixelDepth ：屏幕的像素深度。

document

document对象表示当前的HTML文档。

document对象有以下几个属性：

documentElement ：HTML文档的根元素，通常是元素。
body ：HTML文档的主体部分，包含了网页的主要内容。
head ：HTML文档的头部，包含了元数据和脚本。
title ：HTML文档的标题。
URL ：HTML文档的URL。

clientWidth、offsetWidth和width的区别

clientWidth、offsetWidth和width都是元素的宽度属性，但它们的值并不相同。

clientWidth ：元素的内部宽度，不包括边框、内边距和滚动条。
offsetWidth ：元素的外部宽度，包括边框和内边距，但不包括滚动条。
width ：元素的总宽度，包括边框、内边距和滚动条。

示例

以下是一些使用clientWidth、offsetWidth和width属性的示例代码：

// 获取浏览器窗口的内部宽度
console.log(window.innerWidth);

// 获取浏览器窗口的内部高度
console.log(window.innerHeight);

// 获取body元素的内部宽度
console.log(document.body.clientWidth);

// 获取body元素的内部高度
console.log(document.body.clientHeight);

// 获取屏幕的宽度
console.log(screen.width);

// 获取屏幕的高度
console.log(screen.height);

// 获取documentElement元素的宽度
console.log(document.documentElement.clientWidth);

// 获取documentElement元素的高度
console.log(document.documentElement.clientHeight);