浏览器常用宽高

最新推荐文章于 2021-07-26 11:46:22 发布
最新推荐文章于 2021-07-26 11:46:22 发布
阅读量325 收藏
点赞数
分类专栏： CSS属性
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26239917/article/details/89001802
版权

pageX pageY 到html,body最左侧和最顶部的距离，而不是可视的宽高。

在这里插入图片描述

html,body{
w2000,
h2000
}

此时的pageX 和 pageY 达到了 2014 2010
滚动条已经到达最顶端

clientX clientY

在这里插入图片描述
clientX clientY 只能达到1670左右，说明相对浏览器可视宽度

offsetX offsetY ？？？

在这里插入图片描述

screenX screenY screenX 最小取到102px有一部分拿不到，被顶部占据了

在这里插入图片描述

Fade Away
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 获取屏幕各种宽高的方法(浏览器兼容)
10-27
对于网页元素的宽高信息，常用的有： - `document.body.clientWidth`：网页可见区域的宽度，不包括边框和滚动条。 - `document.body.clientHeight`：网页可见区域的高度，不包括边框和滚动条。 - `document.body....
原生js获取浏览器窗口及元素宽高常用方法集合
10-20
在前端开发中，获取浏览器窗口以及页面元素的宽高是一个经常执行的操作。原生JavaScript为我们提供了多种方法来实现这一需求。本文将详细介绍这些常用方法，并解释它们的应用场景。 1. 获取窗口可视区域的宽度和...
浏览器的各种宽高
Wind_waving的博客
07-26 351
宽高相关的属性（即带有Width/Height，如offsetHeight）：client是不包括边缘（滚动轴）的宽高，offset包括边缘，scroll是包含所有滚动区域的整个正文文档的宽高 参见博客 距离相关的属性（即带有Top/Left，如offsetTop）：offset是相对于父元素的距离 参见博客 ...
浏览器宽高比例
qq_32018131的博客
03-26 242
输出了火狐、谷歌、搜狗浏览器内容区域宽高比例为2.037135278514589
Html 中scroll offset client 总结
dashan_1200的博客
05-31 111
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHe...
浏览器对象的各种宽高
weixin_34071713的博客
12-19 74
Window对象属性ScreenLeft/ScreenTop/ScreenX/ScreenY只读整数，声明了窗口的左上角在屏幕上的 x 坐标 和 y 坐标。IE、Safari 和 Opera 支持 ScreenLeft/ScreenTopFirefox、Safari 支持 ScreenX/ScreenYChrome 都支持innerWidth/innerHeight只读属性，...
浏览器有关的宽高详解
sysuzhyupeng的博客
05-01 3025
简介window对象表示浏览器打开的窗口（可以省略，全局变量挂载在window对象下，alert，confirm等方法）。document对象是HTML文档，是window对象的一部分(document.body可以写成window.document.body)。与window有关的宽高介绍window.innerHeight和window.outerHeight的区别在于，前者是浏览器内部文档的高
CSS常用浏览器兼容调整小结
09-25
在互联网上制作网页时，CSS和DIV布局技术被广泛使用，其好处在于能够带来更为丰富和动态的页面体验，但不同浏览器对CSS规则的解释差异往往会导致兼容性问题。尤其是早期的浏览器如IE6、IE7等与现代浏览器如Firefox等...
js获取图片宽高的方法
10-23
这是最传统和常用的方法，通过创建一个新的Image对象，并为其src属性赋值图片的URL，然后监听这个对象的onload事件。当图片加载完成时，它的宽度和高度属性会被正确设置。示例如下： ```javascript var img = new ...
浏览器宽高
banglongchu5551的博客
05-08 248
1 document.body.clientWidth; //网页可见区域宽(body) 2 3 document.body.clientHeight; //网页可见区域高(body) 4 5 document.body.offsetWidth; //网页可见区域宽(body)，包括border、margin等 6 ...
常见浏览器对象（宽高）
liu066154的博客
04-22 152
网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全文高：d...
1024和800分辨率下浏览器宽度和宽度的设定研究[转]
weixin_34008784的博客
04-06 401
1024分辨率下： IE： IE7：1003*590 IE6：1003*596 IE5.5:1003*607 Maxthon(正常模式):1003*544 浏览窗口的高度跟IE上边的工具栏有关系，以上的高度都是在IE的默认状态下的。Mathon有IE模式、正常模式、简单模式三个模式，我只测试了正常模式下的。 FireFox： FireFox的浏览窗口的高度和宽度是这样计算的：当页面...
获取浏览器各种宽高
奔跑的面条博客
02-22 334
摘抄自掘金 https://juejin.im/post/5b94d8965188255c5a0cdc02 获取屏幕的高度和宽度（屏幕分辨率）： window.screen.height/width 获取屏幕工作区域的高度和宽度（去掉状态栏）： window.screen.availHeight/availWidth 网页全文的高度和宽度： document.body.scrollHeig...
js中浏览器各种宽高解析
baidu_24707273的博客
07-17 555
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body style="background-c
有关浏览器几种宽高的汇总
JH0610Y的专栏
06-04 570
浏览器时下窗口可视区域高度 $(window).height() 浏览器时下窗口文档的高度 $(document).height() 浏览器时下窗口文档body的高度 $(document.body).height() 浏览器时下窗口文档body的总高度 包括border padding margin $(document.body).outerHeight(
jquery常用
Noah
03-11 565
获取浏览器显示区域的高度 ： $(window).height(); 获取浏览器显示区域的宽度 ： $(window).width(); 获取页面的文档高度 ： $(document).height(); 获取页面的文档宽度 ：$(document).width(); 获取滚动条到顶部的垂直高度 ： $(document).scrollTop(); 获取滚动条到左边
浏览器各个宽度代表什么
u010705091的专栏
11-21 1141
浏览器窗口
浏览器窗口的尺寸参数图解
Learning
06-26 3180
Web网页尺寸(1)
qmister
10-07 8118
开发十年，就只剩下这套Java开发体系了 >>>    ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值