拾光记录
218个文档 导航 作者 Gitee
随笔记录4
Hexo博客:基础使用Hexo博客:Next主题Hexo博客:Next进阶使用Hexo博客:Next高级配置
前端知识4
基础知识17
Vue框架19
UniApp14
微信小程序1
Java编程6
Java基础15
SpringBoot31
SpringMVC18
MyBatis9
SpringCloud15
中间件2
数据库4
MySQL13
Redis8
MongoDB10
其他数据库1
Python编程6
Python基础知识Python语法yolo目标检测OpenCV的使用及树莓派平台condauv管理工具
Linux12
Linux常用命令Jar启动脚本VirtualBox安装CentOSVirtualBox安装Ubuntu树莓派安装及使用frp内网穿透ArchLinux:基础系统安装ArchLInux:图形化界面安装ArchLinux:常用软件ArchLinux:深度优化ArchLinux:NiriArchLinux:模块记录
软件工具12
IDEAGitMavenGradleNginx安装Nginx配置JMeter压测OllamaRustFSPicGoVSCodeDocker
创意设计2
Blender:入门知识UI设计基础知识
AI相关9
Claude CodeHermes AgentOpenAI基本使用OpenAI工具调用OpenAI记忆管理OpenAI推理执行OpenAI开发框架Langchainllama.cpp

获取窗口高度宽度

/**
 * 获取窗口高度
 */
getWinHeight() {
  let winWidth
  let winHeight
  // 获取窗口宽度
  if (window.innerWidth) {
    winWidth = window.innerWidth
  } else if ((document.body) && (document.body.clientWidth)) {
    winWidth = document.body.clientWidth
  }
  // 获取窗口高度
  if (window.innerHeight) {
    winHeight = window.innerHeight
  } else if ((document.body) && (document.body.clientHeight)) {
    winHeight = document.body.clientHeight
  }
  // 通过深入 Document 内部对 body 进行检测,获取窗口大小
  if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
    winHeight = document.documentElement.clientHeight;
    winWidth = document.documentElement.clientWidth;
  }
  console.log(winWidth)
  console.log(winHeight)
}

高度改变事件

window.onresize = function(){
}

JS获取DOM宽高

网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth
获取窗口高度宽度高度改变事件JS获取DOM宽高