javascript中获取dom元素高度和宽度的方法如下

最新推荐文章于 2024-04-11 16:16:12 发布
最新推荐文章于 2024-04-11 16:16:12 发布
阅读量368 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zhangbo19920918/article/details/104817667
本文详细介绍了网页中各种尺寸和位置属性的使用方法，包括可见区域宽高、正文宽高、滚动条位置等，以及如何获取DOM元素的宽、高、距离边界的位置。对于前端开发者来说，这些属性是实现页面布局和交互效果的基础。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

网页可见区域宽： document.body.clientWidth

网页可见区域高： document.body.clientHeight

网页可见区域宽： document.body.offsetWidth (包括边线的宽)

网页可见区域高： document.body.offsetHeight (包括边线的高)

网页正文全文宽： document.body.scrollWidth

网页正文全文高： document.body.scrollHeight

网页被卷去的高： document.body.scrollTop

网页被卷去的左： document.body.scrollLeft

对应的dom元素的宽高有以下几个常用的：

元素的实际高度：document.getElementById("div").offsetHeight

元素的实际宽度：document.getElementById("div").offsetWidth

元素的实际距离左边界的距离：document.getElementById("div").offsetLeft

元素的实际距离上边界的距离：document.getElementById("div").offsetTop
 

JavaScript获取DOM元素位置和尺寸
pepping798的专栏
10-26 2101
clientHeight和clientWidth描述元素内尺寸，是指 元素内容+内边距 大小，不包括边框（IE下实际包括）、外边距、滚动条部分。 clientHeight就是div的高度+上下的padding，clientWidth同理 offsetHeight和offsetWidth描述元素外尺寸，是指 元素内容+内边距+边框，不包括外边距和滚动条部分。 offsetHeight是client
JS中获取dom元素高度相关方法
llllllhy_的博客
04-21 2876
元素的实际距离左边界的距离：document.getElementById(“div”).offsetLeft。元素的实际距离上边界的距离：document.getElementById(“div”).offsetTop。元素的实际宽度：document.getElementById(“div”).offsetWidth。网页可视区域高： document.body.offsetHeight (包括边距的高)网页可视区域宽： document.body.offsetWidth (包括边距的宽)
js中获取dom元素高度
热门推荐
韦_恩的博客
05-18 2万+
目录 1.dom元素的宽高 2.鼠标事件中的常用高度宽度： 3. 总结： 4.参考博客： 1.dom元素的宽高 javascript中获取dom元素高度和宽度的方法如下： 网页可视区域宽： document.body.clientWidth 网页可视区域高： document.body.clientHeight网页可视区域宽： document.body.offsetWidth (包括边线的宽)网页可视区域高： document.body.offsetHeight (包括边线的高) 网页正文全
javascript中获取dom元素高度和宽度
weixin_42508745的博客
11-06 1991
javascript中获取dom元素高度和宽度的方法如下： 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： document.body.scrollWidth 网页正文全文高： document.body.scrollHe
js获取元素高度
m0_56695398的博客
12-21 2690
获取的元素高度包括内容、padding、border，不包括margin，getBoundingClientRect( )方法可以获取元素的位置和大小信息，包括left、right、top、bottom、width、height。获取的元素高度是内容的真实高度，即整个内容在没有滚动条的情况下所占据的高度包括被隐藏的部分。获取的元素高度包括内容、padding，不包括border、margin。获取元素的计算样式，包括高度、宽度。获取元素相对于其父元素顶部的距离。
javascript获取隐藏元素(display:none)的高度和宽度的方法
01-19
js获取可见元素的尺寸还是比较方便的，这个可以直接使用这个方法： 代码如下:function getDefaultStyle(obj,attribute){ // 返回最终样式函数，兼容IE和DOM，设置参数：元素对象、样式特性 return obj.currentStyle...
javascript获取设置div的高度和宽度兼容任何浏览器
10-26
此外，若要获取不包含边框的元素高度和宽度，可以使用`clientHeight`和`clientWidth`属性。这两个属性返回元素的内部高度和宽度（即元素的内容区域加上内边距）。如果需要获取不包括内边距、边框以及滚动条的高度和...
javascript获取隐藏dom的宽高 具体实现
01-19
首先clone一个DOM，设置position:absolute，然后设置top为一个比较大的负值，然后使其显示出来，最后获取到了DOM的宽高后，将其remove。具体代码如下：Js代码 代码如下:function getCss(elem, css){ if (window....
Javascript获取图片原始宽度和高度的方法详解
10-21
本文将深入探讨如何有效地获取图片的原始宽度和高度，同时提供兼容不同浏览器的解决方案。 首先，我们通常会尝试使用HTML元素的内置属性来获取尺寸，例如`img`元素的`innerWidth`属性。然而，`innerWidth`并不总是...
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
10-25
本文主要探讨了JavaScript中获取和判断浏览器窗口、屏幕以及网页高度和宽度的方法，这对于网页布局和响应式设计至关重要。在JavaScript中，有多种属性和方法可以用来获取不同维度的尺寸信息。 首先，我们关注的是...
Js 精确获取Dom元素宽度/高度
飞扬_柳絮的专栏
08-29 2778
css像素解析： 四舍五入解析的浏览器：IE8、IE9、Chrome、Firefox 直接取整解析的浏览器：IE7、Safari 获取元素精确的宽度/高度(带小数位像素) 问题：document.getElementById(id).style.width 只能获取元素行内样式的值 解决办法一： window.getComputedStyle(element)...
JS原生DOM操作 - 获得元素/网页大小/元素宽高
cherry__yu的博客
04-11 3058
它返回一个对象，其中包含了left、right、top、bottom四个属性，分别对应了该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离。scrollHeight和scrollWidth属性提供了元素内容的整体宽度和高度，指包括滚动条在内的视觉面积（包括因溢出而未显示在屏幕上的部分）。每个元素都有offsetTop和offsetLeft属性，表示该元素的左上角与父容器（offsetParent对象）左上角的距离。网页元素的绝对位置，指该元素的左上角相对于整张网页左上角的坐标。
js获取图片信息（二）-----js获取img的height、width宽高值为0
weixin_30414155的博客
07-27 432
首先，创建一个图片对象： var oImg= new Image(); oImg.src = "apple.jpg"; 然后我们打印一下图片的信息： console.log(oImg); console.log(oImg.src); console.log(oImg.height); console.log(oImg.naturalHeight); c...
js | javascript中获取dom元素的高度和宽度
weixin_30244681的博客
02-24 123
javascript中获取dom元素高度和宽度的方法如下： 网页可见区域宽： document.body.clientWidth网页可见区域高： document.body.clientHeight网页可见区域宽： document.body.offsetWidth (包括边线的宽)网页可见区域高： document.body.offsetHeight (包括边线的高)网页正文全文宽： docu...
javascript中获取dom元素的高度和宽度
weixin_34151004的博客
02-24 61
javascript中获取dom元素高度和宽度的方法如下： 网页可见区域宽： document.body.clientWidth网页可见区域高： document.body.clientHeight网页可见区域宽： document.body.offsetWidth (包括边线的宽)网页可见区域高： document.body.offsetHeight (包括边线的高)网页正文全文宽： docu...
Js获取DOM元素宽高，Js获取不到DOM元素宽高
卡卡西：一个擅长拷贝的前端程序员
12-24 1707
dom及css样式如下： <style> #element { background-color: aquamarine; width: 100px; } </style> <div id="element" style="height: 100px;"></div> 方法1: element.style.width/height const el = document.getElementById('
vue dom渲染完成后 无法获取高度
TO_Web的博客
01-21 1164
在dom渲染完成后想要获取该元素的高度时 发现为0 解决办法: 在这个生命周期里添加获取高度的代码 updated () { this.$nextTick(() => { this.contentHight = this.$refs.content.offsetHeight }) }, ...
uniapp，JS获取DOM元素的宽度、高度
最新发布
03-14
<think>好的，用户的问题是在UniApp中使用JavaScript获取DOM元素的宽度和高度。我需要先回想一下UniApp的相关知识，特别是关于DOM操作的部分。 记得UniApp是基于Vue.js的，所以常规的Vue方法应该适用。不过，UniApp运行在小程序或移动端环境，和Web的DOM操作可能有所不同。用户提供的引用内容中提到，可以通过ref或者id来获取元素引用，比如引用[1]和引用[4]都提到了使用ref属性或者id来获取元素。 在引用[4]中，用户展示了两种方法：使用this.$refs.targetDom或者document.querySelector('#targetDom')。但需要注意的是，UniApp可能在不同平台上的兼容性不同。比如在小程序中，document对象可能不可用，所以更推荐使用Vue的ref方式。 接下来，获取到元素后，如何得到尺寸呢？常规的Web方法是使用offsetWidth和offsetHeight，或者getBoundingClientRect()。但在UniApp中可能需要使用uni.createSelectorQuery()方法，这是UniApp提供的API，用于跨平台获取节点信息。 用户可能没有考虑到不同平台的差异，直接使用Web方法可能在小程序里不生效。因此，正确的做法应该是使用uni.createSelectorQuery()来查询节点信息，然后通过exec()方法获取尺寸数据。同时，ref的方式在Vue中可能只能获取组件实例，而不是DOM节点，所以需要结合UniApp的节点查询API。 总结步骤应该是：首先给元素设置id或ref，然后使用uni.createSelectorQuery().select()方法选择元素，接着调用boundingClientRect()方法获取尺寸，最后执行exec()得到结果。此外，还需要注意在生命周期钩子中调用，比如onReady，确保DOM已经渲染完毕。 需要验证一下是否正确。比如在引用[4]中，用户提到使用ref或id获取节点，但可能在实际使用中，uni.createSelectorQuery()更可靠。因此，回答中应强调使用UniApp官方推荐的API，并给出具体代码示例，同时解释不同方法的适用场景和注意事项。</think>在 UniApp 中获取 DOM 元素的尺寸，需要通过**跨平台兼容的节点查询 API** 实现，具体步骤如下： ### 方法一：使用 `uni.createSelectorQuery()`（推荐） ```javascript // 通过 id 选择元素（注意需添加 # 符号） uni.createSelectorQuery() .select('#targetDom') .boundingClientRect(rect => { console.log('宽度:', rect.width, '高度:', rect.height) }) .exec() ``` ### 方法二：使用 Vue 的 `$refs` 获取（需结合节点查询） ```javascript // 添加 ref 属性到元素 <view ref="myView"></view> // 在 script 中获取 this.$nextTick(() => { uni.createSelectorQuery() .in(this) // 限定组件作用域 .select('.myView') .boundingClientRect(rect => { console.log('尺寸:', rect) }) .exec() }) ``` ### 注意事项 1. **生命周期时机**：需在 `onReady` 生命周期或 `$nextTick` 回调中调用，确保元素已渲染完成[^4] 2. **跨平台差异**：小程序环境不支持原生 DOM 操作（如 `document.querySelector`）[^4] 3. **返回值结构**：`boundingClientRect` 返回对象包含 `width/height/top/left` 等完整尺寸信息 $$ \text{响应式布局公式参考：元素宽度} = \min(\text{容器宽度}, \text{最大设定宽度}) $$
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

对雪书空武

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值