js获取浏览器各种宽高

【总结】JS 获取浏览器可视区域的宽高 兼容多浏览器 平时在些项目的时候,难免会用到一些基础的宽高等数据,可能是用来做屏幕的适配,也可能是用来计算效果的临界值,总之看似简单的数据,却经常能够用得到,不知道小伙伴们都是怎么获取的,反正楼主是比较懒的那种,非常不喜欢去记那些个方法,所以就总结一下,方便以后查找 先来张经典的图 IE中: document.body.clientWidth ==> BODY对象宽度 document.bod... 阅读详情

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

网页可见区域宽: 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

// 部分jQuery函数
$(window).height()  //浏览器时下窗口可视区域高度
$(document).height()    //浏览器时下窗口文档的高度
$(document.body).height()      //浏览器时下窗口文档body的高度
$(document.body).outerHeight(true) //浏览器时下窗口文档body的总高度 包括border padding margin
$(window).width()  //浏览器时下窗口可视区域宽度
$(document).width()//浏览器时下窗口文档对于象宽度
$(document.body).width()      //浏览器时下窗口文档body的高度
$(document.body).outerWidth(true) //浏览器时下窗口文档body的总宽度 包括border padding

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

告别Link180!在Ansys Mechanical 2020R2中正确启用Cable280绳索单元(附Beta选项开启指南) 本文详细介绍了在Ansys Mechanical 2020R2中启用Cable280绳索单元的全过程,包括Beta选项的开启步骤、建模技巧及高阶应用。Cable280作为专为绳索仿真设计的单元,相比传统的Link180单元,在大变形模拟和计算效率上表现更优,特别适合斜拉桥、电梯牵引绳等工程场景。 阅读详情

相关推荐

沈阳计算机研究所复试,沈阳计算所复试试题附答案.doc

沈阳计算所复试试题附答案目录数据结构1200612007220085200914操作系统16200616200718200818200919组成原理20200620200720200821200921经典算法22数据结构2006数据结构部分(共25分,第1题10分,第2题15分)在(下图)所示的有向图中:v1 v2v4 ...

weixin_42511053的博客 862

js 窗口方法

窗口宽高 document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 网页可见区域宽: document.body.clientWidth 网页可见区域高: docume

妙蛙真香的博客 608

ESP32S3与ILI9341 LCD屏LVGL移植实战:从零构建嵌入式GUI界面

本文详细介绍了如何在ESP32S3平台上移植LVGL图形库并驱动ILI9341 LCD屏幕,从硬件选型、开发环境配置到显示驱动实现和内存优化。通过实战案例讲解移植过程中的关键步骤和常见问题解决方案,帮助开发者快速构建嵌入式GUI界面。

h9j8k7l6m5n的博客 1097

获取屏幕高度的js方法,完成响应式布局!!

根据屏幕大小设计不同的css来适应不同的屏幕效果

m0_56125881的博客 7795

K-GAS解读(08)

大众kgas标准,大众及其供应商kgas

m0_51113317的博客 598

Ubuntu22.04+PX4+Gazebo:从零到一构建无人机仿真开发环境

本文详细介绍了在Ubuntu22.04系统下搭建PX4+Gazebo无人机仿真开发环境的完整流程。从基础环境配置、PX4固件安装到Gazebo仿真环境搭建,提供了实用命令和常见问题解决方案,帮助开发者快速构建高效的无人机开发环境。

weixin_29243279的博客 437

JS获取浏览器可视区域宽高

写在前面 浏览器可视区域宽高并不就等于浏览器窗口宽高,而是除去顶部标签栏+滚动条(如果有)+控制台(如果有f12打开)之外的尺寸大小 因为比较简单所以直接上代码: let w, h; // 对于ie9以上浏览器(手机浏览器,一直是保持最新内核标准,当然也支持这种方式获取) w = window.innerWidth; h = window.innerHeight // 对于ie9以下 w = document.documentElement.clientWidth; h = do...

qq_2411868438的博客 5373

【商业化】【msix打包】Python 应用打包为 MSIX 的正确流程:入口点问题与解决方案

发现用msix打包工具打包python做的exe时总找不到程序入口点,后来理了一下才发现自己误会了,需要先生成一个基本的setup.exe,msix的打包是基于这个初始的安装程序进行的。只需要点击Buile-》Compile,然后Open Output Folder就可以得到exe安装程序了。可以使用免费工具inno setup来创建初始安装包。其中{group}这样的变量会自动匹配,不用自己指定。如果点击Run会运行安装程序。

每日出拳老爷子的博客 1103

JS获取各种屏幕的宽度和高度

JS获取各种屏幕的宽度和高度

m0_48524046的博客 7898

基于Pascal VOC数据集的YOLOv8目标检测系统实现:人、鸟、猫、牛、电视、车等20类目标识别与UI界面部署全流程详解

VOC 2007、VOC 2012 两个主要版本;每个图像提供 bounding box(目标框)+ 目标类别;共计 20 类,所有图像手工标注,质量高。完整复现 Pascal VOC 20类检测任务成功训练 YOLOv8 模型实现可视化 UI + 实时检测系统支持多平台部署和演示。

YOLO 771

围绕国产化操作系统以及人大金仓地理空间库的GIS的解决方案,含超详细部署步骤以及与QGIS,GeoServer,PostGlS Shapefile lmport/Export Manager的连接步骤

人大金仓软件 2.1软件的下载以及授权的相关文件插件 2.2上传至虚拟机 2.3KingbaseES V8R6数据库部署过程 2.3.1创建安装用户 2.3.2赋权 2.3.3.创建安装目录且赋权 2.3.4 准备挂载 2.4kingbase安装方法 2.7postgis安装 3 人大金仓数据库与QGIS的连接 4 人大金仓数据库与PostGlS Shapefile lmport/Export Manager的连接 5 人大金仓数据库与geoserver的连接

挣钱花388的博客 2590

获取当前可视屏幕高度

em 它是描述相对于应用在当前元素的字体尺寸,所以它也是相对长度单位。一般浏览器字体大小默认为16px,则2em == 32px; ex 依赖于英文字母小 x 的高度 ch 数字 0 的宽度 rem 根元素(html)的 font-size vw viewpoint width,视窗宽度,1vw=视窗宽度的1% vh viewpoint height,视窗高度,1vh=视窗高度的1% vmin vw和vh中较小的那个。 vmax v

liuzaixi的博客 5294

032、准谐振反激变换器(QR-Flyback)原理

文章摘要: 本文以65W PD快充炸管案例切入,解析准谐振反激变换器(QR-Flyback)原理。通过主动利用漏感与MOS结电容的谐振,在Vds波谷开通实现近似ZVS,显著降低开关损耗与电压应力。对比传统反激,QR模式轻载效率提升8%,Vds尖峰减少23%。关键设计要点包括:变压器漏感需<3%、谷底检测电路需抗干扰、启动阶段需防过冲。推荐NCP1340等专用控制芯片,并强调VCC电容优选低ESR陶瓷材质。QR适用于30W-150W场景,其核心优势在于轻载效率优化,但需平衡漏感控制与可靠性。作者结合实测数据与

Jack010169的博客 118

【JS获取宽高】JavaScript获取浏览器、元素、屏幕的宽高尺寸

一篇文章详细了解JS中各元素获取宽高的属性值

Lipn_的博客 428

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

JS中怎么获取浏览器以及其他标签的宽高

JS中怎么获取浏览器以及其他标签的宽高经过测试,在JS中是不能直接使用对象名.style.width/height来获取标签的宽高的,强制获取不会返回任何结果,其实,在JS中获取标签的宽高是有特殊语法的,请参照以下程序片段;对浏览器body宽高的获取:&lt;html&gt; &lt;body&gt; &lt;script language="JavaScript"&gt; function t...

FreeSpider 423

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

js获取浏览器 屏幕宽高尺寸

<!doctype html> <head> <meta charset="utf-8"> <title>js获取浏览器宽高尺寸</title> </head> <body> <script language="javascript"> var h = ""; h += " 网页可见区域宽:"+ doc...

jiangbinwangyi的博客 415

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

js获取浏览器宽高及获取浏览器可视宽高

js获取浏览器宽高及获取浏览器可视宽高 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线和滚动条的宽) 网页可见区域高:document.body.offsetHeight(包括边线的宽) 网页正文全文宽:docu...

Taurus_666 2695

js动态获取浏览器或页面等容器的宽高

首先说一下js动态获取浏览器或页面等容器的宽高的方法大体有哪些: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offsetWidth (包括边线的宽) 网页可见区域高: document.body.offsetHeight (包...

weixin_30607659的博客 349

JavaScript获取浏览器可视区域的宽高

JavaScript获取浏览器可视区域的宽高 在做项目的时候,我们常常需要对项目做一些优化,来提升页面响应的速度,比如进入可视区域后再发送请求获取数据或者是填充模板,这个时候就需要能够获取到浏览器的可视区域的宽高: // 获取浏览器可视区域宽高(兼容性比较好,不包括工具栏和滚动条) var browserWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var bro

weixin_43852569的博客 3496

JavaScript获取浏览器宽高

1、精简版 function ScreenSize() { let width = 0; let height = 0; if (window.innerWidth) { width = window.innerWidth; height = window.innerHeight; } else { width = document.documentElement.clie

ZWQ0325的博客 247

js获取浏览器窗口宽高

我遇到的情况是,easyui弹出框,控制窗体大小的时候。 js获取浏览器窗口宽高: var height = document.body.clientHeight; var width = document.body.clientWidth; 同时,缩放百分比可以乘以相应的小数,如: var height = document.body.clientHeight * 0.7; //

BruceOuyang 的专栏 1009

JS获取浏览器或者系统宽高

function test(){ var s = ""; s += "\r\n网页可见区域宽:"+ document.body.clientWidth; s += "\r\n网页可见区域高:"+ document.body.clientHeight; s += "\r\n网页可见区域宽:"+ document.body.offsetWidth +" (包括边线的宽

厂长的博客 529

electronjs设置宽度_Js操作DOM元素及获取浏览器高宽的简单方法

在JavaScript中,经常会来获取Document文档元素,是 HTML 文档对象模型的英文缩写,Document Object Model for HTML,是基于浏览器编程,HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法。通过 DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性。可以对其中的内容进行修改和删除,同时也可以...

weixin_39525243的博客 683

用JS获取浏览器的可见宽高

用JS获取浏览器的可见宽高 当涉及到不同的页面大小适配,不了解电脑尺寸大小,可以用clientwidth,clientheight来获取宽高。 //js获取浏览器可见宽高 $(function () { console.log(document.body.clientWidth ) console.log(document.body.clientHeight ) }) ...

weixin_48129874的博客 352

Javascript:获取浏览器窗口和屏幕的可用宽高

Javascript:获取浏览器窗口和屏幕的可用宽高

books1958的专栏 1473

JS 获取设备浏览器宽高

网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offsetWidth (包括边线的宽) 网页可见区域高: document.body.offsetHeight (包括边线的高) 网页正文全文宽: document.body.scrollWidth 网页正文全...

wanghui374的博客 190
上一篇: 解决移动端点击三百毫秒延迟问题
下一篇: 2020-11-27
Smart_coding
博客等级 码龄7年 21粉丝 24原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值