获取页面宽高总结

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

网页被卷去的高:document.documentElement.scrollTop(IE7有效)

网页被卷去的左:document.documentElement.scrollLeft(IE7有效)
网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth

相对于窗口左上角的X:window.event.clientX

相对于窗口左上角的Y:window.event.clientY
相对于整个页面的X:window.event.X
相对于整个页面的Y:window.event.Y

### UniApp 中获取元素度和度的方法 在 UniApp 开发中,可以通过 `uni.createSelectorQuery()` API 来动态获取页面中某个 DOM 元素的尺寸信息(如度和度)。以下是具体实现方式以及注意事项: #### 使用 `uni.createSelectorQuery` 获取元素 通过调用 `uni.createSelectorQuery().in(this)` 创建查询对象,并指定目标节点的选择器 `.class-name` 或者 `#id-name`。接着使用方法链调用 `boundingClientRect(callback)` 将返回的结果传递给回调函数,在其中可以读取到所需的属性。 ```javascript // 示例代码:获取 .example-class 的 uni.createSelectorQuery() .in(this) // 如果是在组件内部,则需要加上此行;如果是页面则可省略 .select('.example-class') // 替换为实际的目标选择器 .boundingClientRect(data => { console.log('元素度:', data.width); console.log('元素度:', data.height); }) .exec(); ``` 上述代码片段展示了如何利用 `boundingClientRect` 方法取得选定 HTML 节点的位置与大小信息[^4]。 #### 同步 vs 异步执行区别 需要注意的是,`.exec()` 是异步操作的一部分,它会触发之前定义好的所有回调处理程序并立即结束当前查询批次。如果仅需单一值而无需复杂逻辑组合时也可以考虑同步版本即直接访问单个 promise 值的方式简化流程[^5]。 另外还有一种更简便但功能有限的情况适用于整个窗口范围而非特定子项——那就是借助于系统级接口 `uni.getSystemInfo` 可快速拿到全局视口参数比如屏幕分辨率等基本信息作为替代方案之一[^3]: ```javascript uni.getSystemInfo({ success(res){ const {windowWidth, windowHeight} = res; console.log(`Screen Width:${windowWidth}, Screen Height:${windowHeight}`); } }); ``` 但是这种方法无法满足针对独立控件测量的需求所以并不推荐用于精确控制场景下的开发需求之中除非确实只需要知道设备显示区域概况即可完成任务规划。 --- ### 总结 综上所述,对于大多数情况下希望获得某一部分确切几何特性的应用而言,采用基于 CSS Selectors 查询机制配合 boundingClientRect 数据提取手段是最通用也是最灵活的做法[^1][^2]。同时也要注意区分不同上下文中可能存在的细微差异以便正确实施相应策略从而达到预期效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值