JS: innerWidth/Heigt、outerWidth/Height、offsetWidth/Height、clientWidth/Height、scrollWidth/Height

本文详细解析了JavaScript中获取屏幕、浏览器以及元素宽高的一系列属性,包括screen.width/height、window.outerWidth/Height、window.innerWidth/Height、document.documentElement.clientWidth/Height等,并探讨了它们在不同浏览器和模式下的兼容性问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目录

  1. document.compatMode: 获取浏览器当前的渲染模式
  2. window.screen.width: 获取屏幕的水平宽度
  3. window.screen.height: 获取屏幕的垂直高度
  4. window.screen.availWidth: 获取屏幕的水平可用宽度
  5. window.screen.availHeight: 获取屏幕的水平可用高度
  6. window.outerWidth: 获取浏览器窗口实际宽度
  7. window.outerHeight: 获取浏览器窗口实际高度
  8. window.innerWidth: 获取浏览器可视区的宽度+纵向滚动条的宽度
  9. window.innerHeight: 获取浏览器可视区的高度+横向滚动条的高度
  10. document.documentElement.clientWidth: 获取浏览器可视区的宽度
  11. document.documentElement.clientHeight: 获取浏览器可视区的高度
  12. document.documentElement.offsetWidth: 获取文档根元素本身的实际宽度
  13. document.documentElement.offsetHeight: 获取文档根元素本身的实际高度
  14. document.documentElement.scrollWidth: 获取文档根元素的实际内容宽度
  15. document.documentElement.scrollHeight: 获取文档根元素的实际内容高度
  16. document.body.clientWidth: 获取body元素的内边距区域宽度
  17. document.body.clientHeight: 获取body元素的内边距区域高度
  18. document.body.offsetWidth: 获取body元素本身的实际宽度
  19. document.body.offsetHeight: 获取body元素本身的实际高度
  20. document.body.scrollWidth: 获取body元素的实际内容宽度
  21. document.body.scrollHeight: 获取body元素的实际内容高度
  22. element.clientWidth: 获取元素的内边距区域宽度
  23. element.clientHeight: 获取元素的内边距区域高度
  24. element.offsetWidth: 获取元素本身的实际宽度
  25. element.offsetHeight: 获取元素本身的实际高度
  26. element.scrollWidth: 获取元素的实际内容宽度
  27. element.scrollHeight: 获取元素的实际内容高度

标准模式(CSS1Compat)

一、获取屏幕宽高

注意:受系统分辨率设置的影响

1. 获取屏幕的实际宽高

**所有浏览器都兼容**
window.screen.width: 获取屏幕的水平宽度
window.screen.height: 获取屏幕的垂直高度

2. 获取屏幕的可用宽高

**所有浏览器都兼容**
window.screen.availWidth: 获取屏幕的水平可用宽度(任务栏的宽度除外)
window.screen.availHeight: 获取屏幕的垂直可用高度(任务栏的高度除外)

二、获取浏览器宽高
1. 获取浏览器的实际宽高

**IE9以下不支持**
window.outerWidth: 获取浏览器窗口实际宽度
window.outerHeight: 获取浏览器窗口实际高度

2. 浏览器可视区宽高(visualViewport)

视窗:正常情况下眼睛能看到的显示页面的区域(受物体的远近影响)。

*IE9以下为undefined*
window.innerWidth:获取浏览器视窗的宽度(包含纵向滚动条的宽度)
window.innerHeight: 获取浏览器视窗的高度(包含横向滚动条的高度)


*所有浏览器都兼容*
document.documentElement.clinetWidth
获取浏览器视窗的宽度(不包含纵向滚动条的宽度)
document.documentElement.clientHeight
获取浏览器视窗的高度(不包含横向滚动条的高度)


document.documentElement.offsetWidth
获取DOM文档根元素的宽度(box-sizing:content;)
offsetWidth=内容宽度(width)+左右内边距+左右边框宽度
左右内边距: padding-left + padding-right
左右边框宽度: border-left-width + border-right-width

document.documentElement.offsetHeight
获取DOM文档根元素的高度(box-sizing:content;)
offsetHeight=内容高度(height)+上下内边距+上下边框宽度
上下内边距: padding-top+ padding-bottom
上下边框宽度: border-top-width + border-bottom-width

回忆下现实中盒子物体的宽高计算,一开始就定下来了,不受内部元素物体的影响

浏览器兼容性:
  • IE(5,8,9,10)中: offsetWidth=window.innerWidth, offsetHeight=window.innerHeight
  • IE7中: offsetWidth=clientWidth, offsetHeight=clientHeight

document.documentElement.scrollWidth
获取DOM文档页面的实际宽度,即浏览器可视区宽高+超出可视区的其它部分的宽度
【如果没有滚动条就等于根元素的clientWidth】
document.documentElement.scrollHeight
获取DOM文档页面的实际高度,即浏览器可视区高度+超出可视区的其它部分的高度
【如果没有滚动条就等于根元素的clientHeight】
假设:我在盒子中也有一个带滑动滚动条的异度空间不就是可以装下不受盒子大小的物体吗?


document.body.clientWidth
获取body元素的可视区(内边距区域)宽度:width+padding(left+right)
document.body.clientHeight
获取body元素的可视区(内边距区域)高度:width+padding(top+bottom)


document.body.offsetWidth
获取body元素的Border Area(边框区域)宽度:
width+padding(left+right) + border(left-width±right-width)
document.body.offsetHeight
获取body元素的Border Area(边框区域)高度:
width+padding(top+bottom)+border(top-width+bottom-width)


document.body.scrollWidth
获取body元素可视区宽度(左右内边距+内容区宽度)+超出可视区宽度之外的内容宽度
即document.body.clientWidth + 超出的内容宽度(scrollLeft:横向滚动条拖到最右边)
document.body.scrollHeight
获取body元素可视区宽度(上下内边距+内容区高度)+超出可视区宽度之外的内容高度
即document.body.clientHeight+ 超出的内容高度(scrollTop:横向滚动条拖到最下边)


body的后代元素的clientWidth/Height、offsetWidth/Height、scrollWidth/Height与body的效果一样


结论
scroll只有元素本身的内容是否超出本身盒子content-box有关,不超出时与client是一样的。
client、offset与盒子本身(最初)的大小有关,client不包含边框,offset包含边框。都不包含外边距

见图:

在这里插入图片描述
注意:如果页面被放大可视区相应的就会缩小(就相当于页面离的眼睛越近相应的看到的地方就越小,反之离的越远看到的就越大, 移动端浏览桌面端的网页就是这么个原理)

  // 实际ES6中剩余函数参数的功能
  function restArguments(func, startIndex) {
    return function () {
      var length = func.length,
        argLength = arguments.length,
        index = startIndex - length > 0 ? 0 : startIndex,
        i = 0,
        firstArray = [],
        lastArray = []
      for (; i < index; i++) {
        firstArray.push(arguments[i])
      }
      for (i = index; i < argLength; i++) {
        lastArray.push(arguments[i])
      }
      func.apply(this, firstArray.concat([lastArray]))
    }
  }

  // 偏函数
  write = restArguments(write, 0)

  function write(contents) {
    for (var k in contents) {
      document.write('<br/>' + contents[k])
    }
  }

  write(
    // 浏览器当前的渲染模式-混杂模式/标准模式
    'document.compatMode:' + document.compatMode,
    // 屏幕的分辨率水平像素
    'window.screen.width:' + window.screen.width,
    // 屏幕的分辨率垂直像素
    'window.screen.height:' + window.screen.height,
    // 屏幕的分辨率水平方向的可用像素(不包含任务栏的宽度)
    'window.screen.availWidth:' + window.screen.availWidth,
    // 屏幕的分辨率垂直方向的可用像素(不包含任务栏的高度)
    'window.screen.availHeight:' + window.screen.availHeight,

    // 浏览器窗口的宽度
    'window.outerWidth:' + window.outerWidth,
    // 浏览器窗口的高度
    'window.outerHeight:' + window.outerHeight,
    // 窗口文档可视区宽度+纵向滚动条宽度
    'window.innerWidth:' + window.innerWidth,
    // 窗口文档可视区高度+横向滚动条高度
    'window.innerHeight:' + window.innerHeight,

    // 窗口文档可视区宽度
    'document.documentElement.clinetWidth:' + document.documentElement.clientWidth,
    // 窗口文档可视区高度
    'document.documentElement.clientHeight:' + document.documentElement.clientHeight,
    // 文档根元素的实际宽度不包含外边距(左右)
    'document.documentElement.offsetWidth:' + document.documentElement.offsetWidth,
    // 文档根元素的实际高度不包含外边距(上下)
    'document.documentElement.offsetHeight:' + document.documentElement.offsetHeight,
    // 文档页面的实际宽度(受内部元素的影响),内容不溢出时与clientWidth是一样的
    'document.documentElement.scrollWidth:' + document.documentElement.scrollWidth,
    // 文档页面的实际高度(受内部元素的影响),内容不溢出时与clientHeight是一样的
    'document.documentElement.scrollHeight:' + document.documentElement.scrollHeight,
    
    // 文档body元素的内边距区域宽度(content-box + padding-left/right)
    'document.body.clientWidth:' + document.body.clientWidth,
    // 文档body元素的内边距区域高度(content-box + padding-top/bottom)
    'document.body.clientHeight:' + document.body.clientHeight,
    // 文档body元素的实际宽度不包含外边距(左右)
    'document.body.offsetWidth:' + document.body.offsetWidth,
    // 文档body元素的实际高度不包含外边距(上下)
    'document.body.offsetHeight:' + document.body.offsetHeight,
    // 文档body元素的实际内容宽度(受内部元素的影响),内容不溢出时与clientWidth是一样的
    'document.body.scrollWidth:' + document.body.scrollWidth,
    // 文档body元素的实际内容高度(受内部元素的影响),内容不溢出时与clientHeight是一样的
    'document.body.scrollHeight:' + document.body.scrollHeight,

  )

在这里插入图片描述

<think>好的,用户让我介绍一下这个链接里的内容,并学习里面的代码。首先,我需要确认这个链接是关于什么的。链接是Wallpaper Engine的文档,具体是关于场景(scene)的,所以可能是关于如何创建动态壁纸的教程或API文档。 用户可能想了解如何使用Wallpaper Engine的场景编辑器来制作自己的动态壁纸,或者他们可能对里面的代码示例感兴趣,比如JavaScript或其他脚本语言的使用。需要检查文档的结构,看看有没有具体的代码示例或API参考。 接下来,用户可能是一个开发者,想要通过文档学习如何编写自定义的壁纸效果。他们可能已经有一定的编程基础,但对Wallpaper Engine的特定实现不太熟悉。需要确定文档中提到的技术栈,比如是否使用WebGL、Three.js,或者其他库。 另外,用户提到“学习里面的代码”,可能希望得到代码的解析或示例说明。需要看看文档中的代码部分是否有注释或解释,或者是否需要进一步的研究来理解其工作原理。如果文档中没有详细的代码示例,可能需要建议用户查阅其他资源或社区论坛。 还要注意用户可能遇到的困难,比如环境配置、API调用方法,或者如何测试部署他们的壁纸。可能需要总结文档中的关键点,如场景结构、事件处理、动画循环等,并提供一些基本的使用示例。 最后,确保回答用中文,并且清晰易懂,帮助用户快速入门Wallpaper Engine的场景开发,同时引导他们如何有效地利用文档中的资源进行学习。</think>Wallpaper Engine 的官方文档中的场景(Scene)开发教程是学习动态壁纸制作的重要资源。由于我无法直接访问外部链接,但根据常见的 Wallpaper Engine 开发模式,以下是场景开发的核心知识点学习路径: --- ### **1. 技术基础** - **开发语言**:主要使用 **JavaScript/TypeScript** + **WebGL/Three.js**(3D场景)。 - **网页技术**:基于 HTML/CSS/WebGL,类似网页开发。 - **动画原理**:通过 `requestAnimationFrame` 或 `setInterval` 实现动态效果。 --- ### **2. 核心概念** #### **场景结构** - **HTML 骨架**:定义容器元素(如 `<div>` 或 `<canvas>`)。 - **CSS 样式**:控制布局、背景基础动画。 - **JavaScript 逻辑**:处理交互、动画复杂效果。 #### **Wallpaper Engine API** 文档中可能包含以下 API: - **用户输入**:鼠标、键盘事件监听。 - **系统信息**:获取时间、CPU/GPU 使用率等。 - **壁纸设置**:通过 `window.wallpaperPropertyListener` 读取用户配置参数。 --- ### **3. 代码示例(常见模式)** #### **基础模板** ```html <!DOCTYPE html> <html> <head> <style> #canvas { width: 100%; height: 100%; } </style> </head> <body> <canvas id="canvas"></canvas> <script src="app.js"></script> </body> </html> ``` #### **JavaScript 逻辑(app.js)** ```javascript const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // 响应壁纸尺寸变化 window.wallpaperPropertyListener = { applyUserProperties: (props) => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } }; // 动画循环 function animate() { ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; ctx.fillRect(0, 0, canvas.width, canvas.height); // 绘制动态内容(例如粒子效果) requestAnimationFrame(animate); } animate(); ``` --- ### **4. 学习建议** 1. **熟悉 Web 开发**:先掌握 HTML/CSS/JavaScript 基础。 2. **研究官方示例**:文档中通常提供场景模板代码片段。 3. **探索 Three.js**:如需 3D 效果,学习 Three.js 库(文档可能有集成示例)。 4. **调试工具**:使用浏览器开发者工具调试壁纸行为。 --- ### **5. 进阶功能** - **用户自定义设置**:通过 `*.json` 文件定义可调节参数(如颜色、速度)。 - **音频响应**:根据系统音频输入生成动态效果。 - **多显示器支持**:适配不同分辨率屏幕比例。 如果需要更具体的代码解析,可以提供文档中的代码片段,我可以帮助分析其逻辑!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值