offsetWidth获取元素宽度不准确

最新推荐文章于 2021-02-12 20:54:28 发布
最新推荐文章于 2021-02-12 20:54:28 发布
阅读量3.3k 收藏 1
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kavii_a/article/details/106650878
版权

关于offsetWidth获取元素宽度不准确的问题

今天用js写轮播图的时候，发现使用offsetWidth获取foucs的宽度和我css设置的宽度不一致，如下：
这里设置的宽度为721px
在这里插入图片描述
在这里插入图片描述
在谷歌控制台输出的确是722，一开始我以为代码哪里出了问题，后来发现，原来是foucs里面的margin左右设置的是auto，于是我将auto改成一个准确的数字之后控制台输出的终于是721和css设置的一致

_ForeverYouth_
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
offset方法获取的像素不准确
a877189987的博客
10-26 588
轮播图给的宽度是1226px,但是在用offsetWidth获取元素时候老是发现多了一个像素，或者少一个像素，给的1226px输出的是1227，给1225输出的是1224。到时轮播图无法正常运行 轮播图移动像素差距，导致有间距，无法重回 经过调试 发现offsetLeft也存在变差，导致left无法等于offsetLeft+step=一直都是运行结果是 -1217 - 1 = - 1218+px 所以style.left停留在-1218px,导致下面公式无法...
html offsetwidth 字符串宽度,offsetWidth 获取宽度不准确的问题
weixin_34983902的博客
06-28 739
下面代码，我 .focus 明明写的 721，获取的宽度为什么是 722 呢(第一次 721，一刷新就是 722)？有老师能详细的解释下吗我的 Chrome 版本是：74.0.3729.157(正式版本) (64 位)Document.w {width: 1200px;margin: 0 auto;}.main {width: 980px;height: 455px;margin-left: 21...
Js:offsetWidth的Bug
weixin_34241036的博客
11-14 104
offsetWidth 得到的并不是当前元素width的宽度，而是当前元素盒模型的宽度。 例如： #div1{width:200px; height:200px; border:1px solid black; background:red; padding:5px;} <div>test<div> 这个时候的offsetWidth应该是...
offsetWidth获取元素宽度
weixin_30344131的博客
03-29 522
offsetWidth获取元素宽度条件是css有宽度或者父级有宽度（必须是window.onload之后才能获取到） 转载于:https://www.cnblogs.com/wangshengli520/p/10619507.html
记录一个有关offsetWidth的怪异问题
Handsome_fan的博客
07-08 2099
offsetWidth 是什么？从外形上来看，它和width很像，其实offsetWidth是取得一个DOM对象的border + padding + width的和。果然是和width属性是有关联的啊。 我们认识了offsetWidth后，看一下以下的代码，看看offsetWidth返回的值是什么。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt...
JavaScript中的offsetWidth,offsetHeight,offsetLeft,offsetTop
zw06121的博客
08-19 865
1. 获取宽高left,top值的简便方法 获取宽度 元素对象.offsetWidth 获取到的值会包括边框,padding值,自身宽度 获取高度 元素对象.offsetHeight 获取到的值会包括自身高度,边框 ,padding值 获取父元素 元素对象.offsetParent 获取到的是它的参考父元素 而`parentElement`获取到的...
js获取Html元素的实际宽度高度的方法
11-23
这中情况通过#div1.style.width拿不到宽度，而通过#div1.offsetWidth才可以获取到宽度。 第二种情况就是宽和高是写在行内中，比如style=”width:120px;”，这中情况通过上述2个方法都能拿到宽度。 小结，因为id....
JS获取各种宽度、高度的简单介绍
10-25
主要介绍了JS获取各种宽度、高度的简单介绍的相关资料,需要的朋友可以参考下
js 获取元素在页面上的偏移量的方法汇总
10-24
javascript可以通过四个属性可以获得元素的偏移量，分别是1、offsetHeight，2、offsetWidth，3、offsetLeft，4、offsetTop，今天我们就来具体谈一下获取页面元素偏移量的最佳方法。
javascript获取元素偏移量的方法有哪些
10-25
javascript中可以通过四个属性获得元素的偏移量，offsetHeight、offsetWidth、offsetLeft、offsetTop，下面为大家解释下各属性的含义
JavaScript中offsetWidth的bug及解决方法
10-19
主要为大家详细介绍了JavaScript中offsetWidth的bug及解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
【JavaScript实战经验】canvas画布出现高是宽的两倍，以及宽高不正确问题的处理（方法探索历程）
Ice__Clean的博客
02-12 1274
canvas画布出现高是宽的两倍，是由HTML和CSS设置不统一导致画布拉伸而出现的状况，统一一下就好啦~
js 各种高宽问题，浏览器高宽问题
okyoung188的博客
03-08 346
js 获取文档以及浏览器高宽
或取offsetHeight值不正确
lanseyuanwei2的博客
06-29 7990
代码如下 最新资讯 大数据驱动下的微博社会化推荐 Unity全球领袖齐聚 Unite2016Shanghai精彩议题公布 网站安全检查渐成常态，盛邦安全带... var left = document.getElementById("content"); console.log("高度- - - - - - ->"+left.offsetHe
js运动-offsetWidth和offsetHeight引发的血案
每天进步一点点
05-16 8812
之前说的js运动不管是单物体运动，多物体运动，还是缓冲运动。在获取元素自身宽，高的时候用的都是offsetWidth，offsetHeight，但是这会引发一些麻烦！！因为在js中offsetWidth，offsetHeight获取的不仅仅是元素样式中定义的width，height还包括给元素设置的border和padding的值 看看下面的测试例子： #div1{
DOM元素尺寸offsetWidth,scrollWidth,clientWidth等详解
陈天天
07-01 1万+
例子：<div id="div" style="height: 200px;width: 200px;border:solid 50px red;overflow:auto;padding:50px"> <div id="info" style="height:400px;width:400px;border:solid 1px blue;"></div> <script>
JS中clientHeight、scrollHeight和offsetHeight的大坑，滚动条抖动问题解决
热门推荐
郑伟斌的博客
04-09 2万+
JS中clientHeight、scrollHeight和offsetHeight的大坑，滚动条抖动问题解决1.什么是clientHeight、scrollHeight和offsetHeight1.1 clientHeight是什么1.2 offsetHeight是什么1.3 clientHeight和offsetHeight的注意点1.4 scrollHeight和它的大坑jQuery和原生js...
offsetWidth或者clientWidth获取不到，值为0的坑
weixin_44679078的博客
05-21 9484
遇到的问题： 今天在练习写一个自定义右键多级菜单的时候，遇到一个问题，就是第三级的子菜单定位不对，这个定位是依据父菜单的offsetWidth来确定的。打印了一下offsetWidth的值，一直都是0；在这里卡了很久。后来去搜索，原来元素不显示的时候offsetWidth的值是获取不到的，为0；但是我的三级子菜单是在二级子菜单显示的情况下才出现的。后来分析才发现，在显示三级子菜单之前会将所有菜单隐藏，然后通过事件冒泡显示三级菜单，再显示二级菜单，因此我就获取不到二级菜单的offsetWidth。 所以我解决
vue3 获取元素宽度
最新发布
05-24
在 Vue 3 中，可以使用 `ref` 来获取元素的引用，并使用 `$el` 属性来访问元素本身。然后，可以使用 `offsetWidth` 属性来获取元素的宽度，如下所示： ```html <template> <div ref="myElement">这是一个元素</div> </template> <script> import { ref, onMounted } from 'vue'; export default { setup() { const myElement = ref(null); onMounted(() => { // 访问元素的宽度 console.log(myElement.value.offsetWidth); }); return { myElement, }; }, }; </script> ``` 在上面的代码中，我们通过 `ref` 创建一个名为 `myElement` 的引用，并将其绑定到 `<div>` 元素上。在 `onMounted` 钩子函数中，我们可以访问 `myElement.value` 来获取元素本身，然后使用 `offsetWidth` 属性来获取元素的宽度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值