如何获取一个dom元素的宽和高

最新推荐文章于 2024-04-11 16:16:12 发布
最新推荐文章于 2024-04-11 16:16:12 发布
阅读量3.8k 收藏 9
点赞数 2
分类专栏： 个人随笔 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q535999731/article/details/79638859
版权

1.通过dom的style属性获取宽和高，只能获取内联属性的值

dom.style.width/height

2.无论像是class还是内联还是style都会被浏览器渲染，在渲染之后就会通过currentStyle，不过只有IE支持

dom.currentStyle.width/height

3.getComputedStyle兼容Firefox和Chrome

window.getComputedStyle(dom).width/height

4.getBoundingClientRect，主要是基于绝对位置的计算（能够拿到top、left、width、height）

dom.getBoundingClientRect().width/height
CharlesJoker
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中获取dom高度
m0_50207524的博客
05-28 1569
offsetHeight 属性可以获取元素的高度（包括元素的边框、内边距和内容区域）
Js操作DOM元素及获取浏览器高宽的简单方法
10-21
下面小编就为大家带来一篇Js操作DOM元素及获取浏览器高宽的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
获取dom元素的宽度和高度
qmm0219的博客
07-31 5522
获取dom元素的宽度和高度 一、获取css的大小1.第一种通过内联样式var box = document.getElementById('box'); var w = box.style.width; var h = box.style.height; 2.通过计算元素的大小（但是在ie情况下有一个问题，那就没写widht和height的css就返回auto）;var style = windo
js获取dom元素宽高
过客如期的博客
04-21 1万+
一，前言 1.对于css盒子模型，我们使用width和height等来定义dom元素的宽高，而有时我们需要在js中获取元素的宽高进行一些操作。 2.dom操作提供了相应的属性来实现这一点 二，clientWidth和clientHeight 1.clientWidth和clientHeight用于获取元素的视口宽高，不包含border，margin,还要滚动条。 三，offsetWidth和offsetHeight 1.元素的实际宽高，包含滚动条和border,不包含margin 四，scrollHei
JS原生DOM操作 - 获得元素/网页大小/元素宽高
最新发布
cherry__yu的博客
04-11 2113
它返回一个对象，其中包含了left、right、top、bottom四个属性，分别对应了该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离。scrollHeight和scrollWidth属性提供了元素内容的整体宽度和高度，指包括滚动条在内的视觉面积（包括因溢出而未显示在屏幕上的部分）。每个元素都有offsetTop和offsetLeft属性，表示该元素的左上角与父容器（offsetParent对象）左上角的距离。网页元素的绝对位置，指该元素的左上角相对于整张网页左上角的坐标。
获得dom元素的宽和高
Tizzy_Joel的专栏
05-15 705
var param = i ? "Height" : "Width";             if (elem === win) {                 var de = doc.documentElement;                 rt = self["inner" + param] || (de && de["client" + param]) || doc.b
解决vue项目获取dom元素宽高总是不准确问题
11-20
原因：重置数据后获取dom元素宽高时，dom元素还未渲染完毕； 解决方法：利用Vue.nectTick(callback) this.$nextTick(() => { this.$refs.editor[0].offsetHeight; }) Vue.nectTick() 是在下次DOM更新循环结束之后...
javascript获取隐藏dom的宽高 具体实现
10-27
要获取隐藏DOM元素的宽度和高度，常规方法是不可行的，因为如果一个DOM元素是隐藏的，它通常不会占据页面上的空间，从而导致无法直接获取其尺寸。然而，有一种技术可以通过克隆这个元素，然后将其显示出来来间接获取...
JavaScript监听一个DOM元素大小变化
10-15
在Web开发中，一个常见的场景是需要监听DOM元素的大小变化。特别是在使用canvas绘制图形或者图表时，如果容器的大小发生了变化，就需要重新绘制其中的内容以适应新的尺寸。例如，如果一个div元素的大小随着视窗的...
DOM中获取宽高、位置总结
banketan1026的博客
12-30 211
原生JS 一、文档、窗口的宽高和位置 // 获取屏幕的宽高 window.screen.height | window.screen.width // 屏幕可用工作区宽高 window.screen.availHeight | window.screen.availWidth // 浏览器窗口可见区域宽高 window.innerHeight ≈ documen...
JS中DOM元素获取的宽和高的方法小结
热门推荐
不想写代码的一天
05-28 2万+
网页可见区域宽： document.body.clientWidth （可变） 网页可见区域高： document.body.clientHeight （可变） 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： document.body.scro...
获取元素宽高
YouZi_X的博客
08-15 279
获取元素宽高值，element.style读取的只是元素内联样式,外联样式、嵌套样式无法通过上述方法直接获取.getComputedStyle (Chrome/ff)和currentStyle(ie)可获取最终样式，内联。嵌入和外部，只读
javascript中获取dom元素高度和宽度的方法
weixin_30532973的博客
12-01 2099
网页可见区域宽：document.body.clientWidth网页可见区域高：document.body.clientHeight网页可见区域宽：document.body.offsetWidth (包括边线的宽)网页可见区域高：document.body.offsetHeight (包括边线的宽)网页正文全文宽：document.body.scrollWidth网页正文全文高：do...
dom 获取页面的宽 高 DOM获取元素节点的4中方法 上课随笔
dkzimjki626868的博客
08-16 283
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script type="text/javascript" src="08.14.js"></script> </head...
在Vue中获取DOM元素的实际宽高
pckzzy113的博客
08-22 661
为了保险起见，所有的 DOM 操作建议都放在。来获取一个真实的 DOM 元素。
获取 DOM 实际宽度 offsetWidth | 文本宽度 measureText
海胆的博客
03-07 531
dom.offsetWidth 获取的是div的宽度。// 通过 measureText 计算。'海胆 .7~^@，aA'// 添加 dom 显示。
DOM元素尺寸获取
joey_hao的博客
06-28 280
offset 获取盒模型的尺寸，可视宽高 包含边框 <div> <p></p> </div> <script> var box = document.querySelector('div'); var p = document.querySelector('p'); // 盒模型的宽度 包含边框 console.log(box.offsetWidth);
获取dom元素尺寸大小（含uniapp小程序、h5开发获取方法）
qq_40868156的博客
08-21 2875
一、domEle.getBoundingClientRect() 获取对应元素的大小及其相对于视窗的位置，返回一个包含left, top, right, bottom, x, y, width, 和 height这几个以像素为单位的参数对象，除了width 和 height 以外的属性是相对于视图窗口的左上角来计算的。如下图： 视窗指的是能够显示页面内容的浏览器窗口。 该api详细说明可点击此链接查看：Element.getBoundingClientRect() **注：width、height包含内边
获取dom元素的宽高
09-09
要获取DOM元素的宽高，可以使用以下方法： 1. 使用offsetWidth和offsetHeight属性。这些属性可以返回DOM元素的宽度和高度，包括边框和滚动条。例如，可以使用`var width = element.offsetWidth; var height = element.offsetHeight;`来获取元素的宽高。 2. 使用scrollWidth和scrollHeight属性。这些属性返回的是元素内容加上内边距和溢出内容的宽度和高度。例如，可以使用`var width = element.scrollWidth; var height = element.scrollHeight;`来获取元素的宽高。 3. 也可以使用getComputedStyle方法来获取元素的宽高。这个方法返回一个包含所有计算样式属性的对象，包括宽度和高度。例如，可以使用`var width = window.getComputedStyle(element).width; var height = window.getComputedStyle(element).height;`来获取元素的宽高。 请注意，这些方法都返回的是字符串类型的值，需要根据需求进行解析或转换。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值