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,一经查实,立即删除!

相关文章

shell 查询json文件的某一行并 替换json 键值字符串右边的内容(使用jq工具)

在shell中处理JSON文件时&#xff0c;直接通过shell命令行工具&#xff08;如sed&#xff09;进行精确的键值替换可能会比较困难和复杂&#xff0c;因为JSON数据结构需要解析器来正确识别键值对。推荐使用专门处理JSON的工具&#xff0c;如jq。 假设你有一个简单的JSON文件dat…

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

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

京东面试官问我,你在catch块中写业务代码吗?

文章目录 面试题背景我的理解实际运用场景 面试题背景 京东二面&#xff0c;面试官主要考察软实力吧。问了几个问题&#xff1a; 你觉得什么样的代码是好代码&#xff1f;平时你是如何做系统稳定性建设的&#xff1f;你在catch块中写过业务代码吗&#xff1f; 本文主要是谈谈…

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

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

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

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

图片上传组件

el-upload图片上传 背景代码 背景 项目需要多张图片上传回显&#xff0c;图片上传后返回图片ID&#xff0c;不返回url&#xff0c;需要通过图片ID获取token然后再拼接成图片下载的URL。选择el-upload组件进行开发。 file-list&#xff1a;文件列表&#xff0c;上传下载都需要…

线程池的执行流程

线程池是一种常见的并发编程模式&#xff0c;用于管理和复用线程以执行异步任务。其执行流程通常包括以下步骤&#xff1a; 初始化线程池&#xff1a; 在使用线程池之前&#xff0c;首先需要初始化线程池。在初始化过程中&#xff0c;需要指定线程池的参数&#xff0c;如线程池…

018-VUE框架优点

VUE框架优点 一句话总结 vue 作为一款轻量级框架&#xff0c;门槛低&#xff0c;上手快&#xff0c;简单易学&#xff1b;vue 可以进行组件化开发&#xff0c;数据与结构相分离&#xff0c;使代码量减少&#xff0c;从而提升开发效率&#xff0c;易于理解&#xff1b;vue 最突出…

装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;并自动配置它们…

Maven-基本概念

一、Maven是什么 Maven是一个项目管理的工具。根据许晓斌老师的《Maven实战》一书&#xff1a;它主要完成的工作包含三个方面&#xff1a;构建项目、依赖管理、项目信息管理。 二、构建项目 何为构建&#xff1f;在我们编写完代码后&#xff0c;我们会编译、测试、打包、部署…

vue,Promise备忘

网址 https://www.promisejs.org/ 记录 在Vue.js或者其他JavaScript项目中&#xff0c;Promise 是一种处理异步操作的标准机制&#xff0c;用于解决传统的回调地狱问题&#xff0c;提供了一种更优雅、链式调用的编程模型。Promise对象代表一个异步操作的结果&#xff0c;它可…

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

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

python操作读取excl并进行数据统计

判断是否单元格是否为数字字母内容 bool(re.match(r^[a-zA-Z0-9]$, row[rownum 1]))判断行是否为float类型 type(row[rownum]) float获取workboot中sheet的名称 sheet.name 场景读取某个文件夹下的excl并统计每个sheet页中存在满足条件的 记录数 import re import os imp…

加快代码审查的 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…