js中的offsetWidth岁的BUG

时间:2022-08-28 17:02:11

---恢复内容开始---

在js使用offsetWidth来操作控件的运动是会遇到:  

  var oDiv = document.getElementById('div1')  

  oDiv.style.width = oDiv.offsetWidth - 1 +'px';

当我们运行时不会出什么错误:div会向左缩小。但是当我们在<style>中加入border:1px ;<style>时你会发现:div会向右延伸。

为什么会这样,因为oDiv.offsetWidth 是 oDiv.style.width  + 2*border:1px,所有当oDiv.style.width = oDiv.offsetWidth - 1 +'px';运行的时候

oDiv.style.width =  oDiv.style.width  + 2*border:1px - 1 +'px' = oDiv.style.width + 1px。所以是在原来的基础上加1div会向右延伸。

你可以使用Currentstyle(只用于IE使用),getComputed(低版本IE不支持)来获取width的值。

---恢复内容结束---

js中的offsetWidth岁的BUG的更多相关文章

  1. &lbrack;js&rsqb;uploadify结合jqueryUI弹出框上传,js中的冒出的bug,又被ie坑了

    引言 最近在一个项目中,在用户列表中需要对给没有签名样本的个别用户上传签名的样本,就想到博客园中上传图片使用弹出框方式,博客园具体怎么实现的不知道,只是如果自己来弄,想到两个插件的结合使用,在弹出框中 ...

  2. 有效解决js中添加border后动画bug问题

    做了个demo发现如果一个div不加border属性,用对象的offsetWidth属性来控制width没问题,但是如果一旦加了border属性,问题就来了. 其实offsetWidth属性获取的的是 ...

  3. JS中的offsetWidth、offsetHeight、clientWidth、clientHeight等等的详细介绍

    javascript中offsetWidth.clientWidth.width.scrollWidth.clientX.screenX.offsetX.pageX 原文:https://www.cn ...

  4. 使用node&period;js中遇到的一些小bug

    1.BUG Cannot set headers after they are sent to the client 解决:即发出一次请求得到两次或以上的回应时会出现此警告,此时注意查看再在一些条件下 ...

  5. JS中的offsetWidth&sol;offsetHeight&sol;offsetTop&sol;offsetLeft、clientWidth&sol;clientHeight&sol;clientTop&sol;clientLeft、scrollWidth&sol;scrollHeight&sol;scrollTop&sol;scrollLeft

    这是一组非常容易弄混的参数!都是描述某个盒子元素的宽度.高度以及上或左的距离偏移量. 1. offsetWidth / offsetHeight(不包括外边距) offsetWidth:返回元素的宽度 ...

  6. js中hover事件时候的BUG以及解决方法

    hover事件是我们在开发前段时候遇到的稀松平常的问题,但是有没有发现会出现有一个BUg,比如,你移动到一个元素上,让它执行一个方法,然后你快速的移入移出的时候,他会进行亮瞎你眼睛的频闪效果,而且跟得 ...

  7. js中的offsetWidth用法

    offsetWidth  //返回盒模型的宽度(包括width+左右padding+左右border) <style> #div1 { width:200px; height:200px; ...

  8. js中小数精度问题

    js中小数的取值为近似值,可能比实际值大,也可能比实际值小,进行“四舍五入”得到的 例如:alert(0.1+0.2);值为0.300000004     alert(0.2+0.7);值为1.899 ...

  9. JQuery中width和JS中JS中关于clientWidth offsetWidth scrollWidth 等的含义

    JQuery中: width()方法用于获得元素宽度: innerWidth()方法用于获得包括内边界(padding)的元素宽度: outerWidth()方法用于获得包括内边界(padding)和 ...

随机推荐

  1. 【原】css实现两端对齐的3种方法

    说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐.右对齐的方式来对齐页面 ...

  2. 你可以用OpenCV来干什么

    本文翻译自开源图书“OpenCV by Example”中第1章中的“What can you do with OpenCV?”小节. 使用OpenCV,你几乎可以做任何你能够想到的计算机视觉任务.现 ...

  3. Project Euler:Problem 55 Lychrel numbers

    If we take 47, reverse and add, 47 + 74 = 121, which is palindromic. Not all numbers produce palindr ...

  4. 【集美大学1411&lowbar;助教博客】团队作业5——测试与发布(Alpha版本)

    同学们好像都进入了状态,任务都完成的不错,测试与发布是一个软件的非常重要的环节,每年双11前夕是阿里巴巴加班最严重的时期,这是因为他们在不断的测试,因为他们不想在双11到来之时有任何差池.所以无论你的 ...

  5. xmlrpc

    xmlrpc编辑 官方URL:http://ws.apache.org/xmlrpc/xmlrpc2/index.html 本词条缺少名片图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! x ...

  6. 解决在使用gensim&period;models&period;word2vec&period;LineSentence加载语料库时报错 UnicodeDecodeError&colon; &&num;39&semi;utf-8&&num;39&semi; codec can&&num;39&semi;t decode byte&period;&period;&period;&period;&period;&period;的问题

    在window下使用gemsim.models.word2vec.LineSentence加载中文*语料库(已分词)时报如下错误: UnicodeDecodeError: 'utf-8' cod ...

  7. mysql转移数据目录后无法启动问题

    最近在学习mysql,将mysql的数据目录文件路径/var/lib/mysql转移到/data/mysql,然后通过软连接方式关联. 1. ln -s /data/mysql /var/lib/my ...

  8. Django-----加入MD5格式上传图片

    上传图片为什么要加 MD5 ? 答 :避免用户上传图片的时候图片名重复,而引起先上传的图片被后上传的图片所覆盖的失误! MD5是什么? 答:一种被广泛使用的密码散列函数,可以产生出一个128位(16字 ...

  9. markdown-to-html&period;min&period;js

    直接改成  false 不执行这里 不然异步了

  10. 第86讲:Scala中For表达式的生成器、定义和过滤器

    今天我们来看一下For表达式中的生成器,定义和过滤等内容. 让我们来看下代码 def main(args:Array[String]){     val lauren = Persons(" ...