window.innerHeight window.outerHeight 与screen.height

简介: 本文目录1. window2. innerHeight与outerHeight3. screen.height4. 实例

1. window

window是浏览器支持的全局变量,也可以通过document.defaultView获取它,表示浏览器的窗口信息。


2. innerHeight与outerHeight

innerHeight表示窗口内容区域的高度,这是不包括边框、菜单栏的。


而outerHeight是窗口的整体高度,包括边框、菜单栏等。


所以一般常用的是innerHeight。


3. screen.height

screen是指的屏幕,表示当前整个显示器显示的屏幕部分,不限于当前的窗口。height是屏幕的宽度,例如屏幕分辨率1920*1080的话,一般情况下screen.heigth即为1080。


4. 实例

注意width相关的用法是一致的。


看下面的例子:

<html>
  <head>
    <title></title>
  </head>
  <body>
    <script>
      document.writeln("innerHeight:"+window.innerHeight);
      document.writeln("innerWidth:"+window.innerWidth);
      document.writeln("outerHeight:"+window.outerHeight);
      document.writeln("outerWidth:"+window.outerWidth);
      document.writeln("screen.height"+window.screen.height);
      document.writeln("screen.width"+window.screen.width);
    </script>
  </body>
</html>

效果如下:

image.png


相关文章
|
Web App开发 移动开发 UED
介绍一下HTML5的新技能:多媒体支持
介绍一下HTML5的新技能:多媒体支持
565 2
|
缓存 资源调度 前端开发
从0到1带你用webpack 5构建monorepo项目——上篇(二)
别名配置 对于ts+webpack 的「monorepo」项目 别名的配置有 两种 1. 第一个是在tsConfig 中的别名配置, 这个配置的好处方便 子项目中 互相引用 2. 第二个是在webpack 中配置别名, 为了可以少写很长路径, 同时打包的时候也能找到文件。 1. 如上图 我 在 「3d」 这个项目 我想引用 「utils」 中的方法, 首先这两个项目 分别都 是单独的项目, 都有自己的「tsConfig.json」 文件 为了 防止ts 报错 我们项目根目录的 「tsConfig.json」 配置下别名 "baseUrl": "./packages", // 根路径 路径
从0到1带你用webpack 5构建monorepo项目——上篇(二)
|
3天前
|
安全 应用服务中间件 网络安全
2026年OpenClaw Docker生产环境部署指南:附阿里云1分钟安装OpenClaw+单机架构全流程
2026年,由奥地利开发者Peter Steinberger主导开发的OpenClaw AI执行引擎(曾用名Clawdbot、Moltbot)凭借“从给建议到做事情”的核心能力爆火开源领域,GitHub星标数突破18.6万,成为全球增速最快的开源项目之一。与传统对话式AI不同,OpenClaw定位“本地运行、可自托管的数字员工”,支持接入Claude、GPT、Ollama等主流大模型,兼容钉钉、飞书等十余种通讯渠道,通过技能插件无限扩展能力边界,覆盖办公自动化、代码辅助、跨应用协同等全场景,且基于MIT协议开源,支持免费使用与私有化部署。
244 1
|
JSON Ubuntu JavaScript
工具分享:VsCode注释神器,koro1FileHeader
工具分享:VsCode注释神器,koro1FileHeader
666 3
|
12月前
|
数据采集 前端开发 JavaScript
PDF预览:利用vue3-pdf-app实现前端PDF在线展示
通过本文的介绍,我们详细了解了如何在Vue3项目中使用vue3-pdf-app实现PDF文件的在线展示。从项目初始化、插件集成到高级功能的实现和部署优化,希望对你有所帮助。在实际项目中,灵活运用这些技术可以大大提升用户体验和项目质量。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
前端开发 JavaScript API
Howler.js:音频处理的轻量级解决方案
Howler.js:音频处理的轻量级解决方案
1965 0
|
JavaScript 前端开发 API
vue3的传送门teleport究竟有多神奇?suspense发起异步请求有多简约?
该文章介绍了Vue3中新特性Teleport和Suspense的使用方法,演示了如何使用Teleport进行DOM节点的非父子关系传送,以及Suspense在处理异步组件加载时的优雅展示和错误处理技巧。
|
JSON JavaScript 前端开发
【JavaScript】JavaScript中的深拷贝与浅拷贝详解:基础概念与区别
JavaScript 中,理解数据拷贝的深浅至关重要。浅拷贝(如扩展运算符`...`、`Object.assign()`)仅复制对象第一层,共享内部引用,导致修改时产生意外联动。深拷贝(如自定义递归函数、`_.cloneDeep`或`JSON.parse(JSON.stringify())`)创建独立副本,确保数据隔离。选择哪种取决于性能、数据独立性和资源需求。深拷贝虽慢,但确保安全;浅拷贝快,但需小心引用共享。在面试中,理解这些概念及其应用场景是关键。
866 4
【JavaScript】JavaScript中的深拷贝与浅拷贝详解:基础概念与区别
|
前端开发
如何使用 CSS object-fit 进行图片的缩放和裁剪
如何使用 CSS object-fit 进行图片的缩放和裁剪
1076 0
如何使用 CSS object-fit 进行图片的缩放和裁剪
|
开发框架 JavaScript 前端开发
在Vue前端界面中,几种数据表格的展示处理,以及表格编辑录入处理操作。
在Vue前端界面中,几种数据表格的展示处理,以及表格编辑录入处理操作。

热门文章

最新文章