js 获取浏览器相关的宽高尺寸

在这里插入图片描述

window 屏幕

屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth

document 网页

网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft

event 事件

event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标

应用范例

在这里插入图片描述

<html xmlns="http://www.w3.org/1999/xhtml"><head><title>请调整浏览器窗口</title><meta http-equiv="content-type" content="text/html; charset=gb2312" /></head><body><h2 align="center">请调整浏览器窗口大小</h2><hr /><form action="#" method="get" name="form1" id="form1"><!--显示浏览器窗口的实际尺寸-->浏览器窗口 的 实际高度:<input type="text" name="availHeight" size="4" /><br />浏览器窗口 的 实际宽度:<input type="text" name="availWidth" size="4" /><br /></form><script type="text/javascript">var winWidth = 0;var winHeight = 0;//函数:获取尺寸function findDimensions() {//获取窗口宽度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;}//结果输出至两个文本框document.form1.availHeight.value = winHeight;document.form1.availWidth.value = winWidth;}findDimensions();//调用函数,获取数值window.onresize = findDimensions;</script></body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/735627.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言学习--练习4(二维数组)

目录 1.统计有序数组中的负数 2.矩阵对角线元素和 3.最富有客户的资产总量 4.托普利兹矩阵 5.矩阵中的幸运数 6.二进制矩阵中的特殊位置 7.岛屿的周长 1.统计有序数组中的负数 //直接遍历二维数组即可 int countNegatives(int** grid, int gridSize, int* gridColSize) …

比特币普通地址、隔离见证(兼容)、隔离见证(原生)、Taproot 地址傻傻分不清楚

我们在使用比特币钱包的时候&#xff0c;可以看到各种地址类型&#xff1a;普通地址、隔离见证&#xff08;兼容&#xff09;、隔离见证&#xff08;原生&#xff09;、Taproot 地址。 看得我们一脸懵逼&#xff0c;为什么会有这么多种类型的地址&#xff1f; 它们之间都有什么…

选修-单片机作业第1/2次

第一次作业 第二次作业 1、51 系列单片机片内由哪几个部分组成&#xff1f;各个部件的最主要功能是什么&#xff1f; 51系列单片机的内部主要由以下几个部分组成&#xff0c;每个部件的主要功能如下&#xff1a; 1. **中央处理器&#xff08;CPU&#xff09;**&#xff1a;这是…

装windows11+centos双系统时遇到问题及解决方法

从u盘启动提示linpus lite has been blocked 首先下载iso镜像文件&#xff0c;制作u盘启动工具&#xff0c;进行启动&#xff0c;这里进入bios界面进行启动项选择后&#xff0c;虽然已经将usb作为首要启动值 却会出现上图所示被“block”情形 需要在bios界面security选项&…

【数理统计实验(四)】方差分析

&#x1f349;CSDN小墨&晓末:https://blog.csdn.net/jd1813346972 个人介绍: 研一&#xff5c;统计学&#xff5c;干货分享          擅长Python、Matlab、R等主流编程软件          累计十余项国家级比赛奖项&#xff0c;参与研究经费10w、40w级横向 文…

【动态规划】代码随想录算法训练营第四十四天 |完全背包,518. 零钱兑换 II , 377. 组合总和 Ⅳ (待补充)

完全背包理论基础 完全背包 有N件物品和一个最多能背重量为W的背包。第i件物品的重量是weight[i]&#xff0c;得到的价值是value[i] 。每件物品都有无限个&#xff08;也就是可以放入背包多次&#xff09;&#xff0c;求解将哪些物品装入背包里物品价值总和最大。 完全背包和…

三、实战篇 优惠券秒杀

源码仓库地址&#xff1a;gitgitee.com:chuangchuang-liu/hm-dingping.git 1、全局唯一ID 数据库默认自增的存在的问题&#xff1a; id增长规律明显受单表数据量的限制 场景一分析&#xff1a;id如果增长规律归于明显&#xff0c;容易被用户或者商业对手猜测出一些敏感信息&…

QT画图功能

QT画图功能 每个QWidget都自带的功能&#xff0c;继承了QPainteDevice都可以使用QPainter来进行绘图。 画图需要调用paintEvent绘制事件&#xff0c;paintEvent事件时QWidget类自带的事件。 重写paintEvent事件。&#xff08;重写事件&#xff1a;如果父类有某个方法&#xff…

Spring Boot 面试题及答案整理,最新面试题

Spring Boot中的自动配置是如何工作的&#xff1f; Spring Boot的自动配置是其核心特性之一&#xff0c;它通过以下方式工作&#xff1a; 1、EnableAutoConfiguration注解&#xff1a; 这个注解告诉Spring Boot开始查找添加了Configuration注解的类&#xff0c;并自动配置它们…

22.网络游戏逆向分析与漏洞攻防-网络通信数据包分析工具-加载配置文件到分析工具界面

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 如果看不懂、不知道现在做的什么&#xff0c;那就跟着做完看效果 内容参考于&#xff1a;易道云信息技术研究院VIP课 上一个内容&#xff1a;21.配置数据保存…

加快代码审查的 7 个最佳实践

目录 前言 1-保持小的拉取请求 2-使用拉取请求模板 3-实施响应时间 SLA 4-培训初级和中级工程师 5-设置持续集成管道 6-使用拉取请求审查应用程序 7-生成图表以可视化您的代码更改 前言 代码审查可能会很痛苦软件工程师经常抱怨审查过程缓慢&#xff0c;延迟下游任务&…

什么是GoogLeNet,亮点是什么,为什么是这个结构?

GooLeNet 亮点 最明显的亮点就是引入了Inception&#xff0c;初衷是多卷积核增加特征的多样性&#xff0c;提高泛化能力 &#xff0c;比如&#xff0c;最下边是一个输入层&#xff0c;然后这个输入分别传递给1*1&#xff0c;3 * 3 &#xff0c;5 * 5和一个最大池化层&#xff…

2024春招和暑期实习全面启动!

大家好&#xff0c;我是小柠檬。2024春招和暑期实习全面启动&#xff01;最近&#xff0c;我注意到很多同学都在积极投递简历。 3D视觉求职星球 今天给大家推荐我们的3D视觉岗求职星球&#xff0c;里面时常发布大量3D视觉岗位和星球专属内推岗位。 篇幅有限&#xff0c;文节选…

最新全流程GMS地下水数值模拟及溶质(包含反应性溶质)运移模拟技术深度应用

本文以地下水数值模拟软件GMS操作&#xff0c;本文中强调模块化教学&#xff0c;分为前期数据收集与处理&#xff1b;三维地质结构建模&#xff1b;地下水流动模型构建&#xff1b;地下水溶质运移模型构建和反应性溶质运移构建5个模块&#xff1b;采用全流程模式将地下水数值模…

后端项目访问不了

问题&#xff1a; 后端启动不了&#xff0c;无法访问网站 原因&#xff1a; 1.防火墙没有关 2.有缓存 3、项目没有启动 4、docker没有启动 解决&#xff1a; 先查看进程&#xff1a;docker ps&#xff0c;必须有三个 详细查看&#xff1a;docker ps -a exited代表没有开启…

trunk

介绍&#xff1a; 在华为企业级网络模拟平台&#xff08;eNSP&#xff09;中&#xff0c;“trunk” 是指用于在交换机之间传送多个 VLAN 数据的端口。在华为设备中&#xff0c;“trunk” 端口实际上就是可以承载多个 VLAN 数据流的端口。 当两台交换机之间需要互相传送多个 VLA…

关于多权威属性加密论文阅读

来源于2007年Multi-authority Attribute Based Encryption 从单权威机构到多权威机构的意义是什么呢&#xff1f; 基础方案&#xff08;单权威方案SW&#xff09;支持数据持有者对数据进行加密使用指定的属性集合并且指定一个数值d。当一个用户需要使用该数据时&#xff0c;需…

【LLM】Advanced rag techniques: an illustrated overview

note 文章目录 noteAdvanced rag techniques: an illustrated overview基础RAG高级RAG分块和向量化(Chunking & Vectorisation)搜索索引(Search Index)1. 向量存储索引&#xff08;Vector Store Index&#xff09;2. 多层索引(Hierarchical Indices)3. 假设问题和HyDE(Hypo…

intel realsense D405 在 ROS2 使用示例

1.点云示例 此示例演示如何启动相机节点并使其使用点云选项发布点云。 ros2 launch realsense2_camera rs_launch.py pointcloud.enable:true 以下示例启动相机并同时打开 RViz GUI 以可视化发布的点云。它执行上面的 2 个示例。 ros2 launch realsense2_camera rs_pointcl…

第九个实验:一维数组和二维字符串数组的输入而输出

实验内容: 新建一维数组 新建二维字符串数组 输入内容,运行结果,在输出界面中显示输入的内容 第一步:新建项目 第二步:编程 添加一个INT数控件和字符串控件 修改控件: 复制前面板控件