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

在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. [js]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.js中遇到的一些小bug

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

  5. JS中的offsetWidth/offsetHeight/offsetTop/offsetLeft、clientWidth/clientHeight/clientTop/clientLeft、scrollWidth/scrollHeight/scrollTop/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. c#邮箱发送和接收

    简洁版发送: //web.config ---文件 <?xml version="1.0" encoding="utf-8"?> <!-- 有 ...

  2. 为PetaPoco添加实体模板

    Brad为我们提供了T4模板,因为公司一直在使用CodeSmith,故为其写了一个CodeSmith的模板,代码如下: <%-- Name:EntityTemplates Author: Des ...

  3. 红字差评系列1.第K小数

    [题目分析] 二分答案?smg,我太弱了 //不开longlong wa到挺了 #include <cstdio> #include <cstring> #include &l ...

  4. String,StringBuffer与StringBuilder的区别??[转]

    String 字符串常量StringBuffer 字符串变量(线程安全)StringBuilder 字符串变量(非线程安全) 简要的说, String 类型和 StringBuffer 类型的主要性能 ...

  5. Nordic Semiconductor nRF52832 蓝牙智能多协议单芯片解决方案荣获《中国电子商情》编辑选择奖

    挪威奥斯陆 – 2016年4月11日 – Nordic Semiconductor ASA (OSE: NOD) 赢得<中国电子商情>颁发的"2015年编辑选择奖",其 ...

  6. jsp表格数据导出到Execl

    1.关于“下载” 需要设置页面header的一个属性为:Content-Disposition: attachment; filename=下载的文件.txt 如: <a href=" ...

  7. shell学习笔记1

    知识点1.修改输出的颜色 echo -e "\e[1;31m This is red text \e[0m" 其中,\e[1;31m 表示将输出显示为红色: \e[0m 标识将颜色 ...

  8. zoj3228Searching the String（ac自动机)

    链接 这个题把病毒分为了两种,一种包含可以覆盖,另一种不可以,需要分别求出包含他们的个数,可以把两种都建在一颗tire树上,在最后求得时候判断一下当前节点是属于哪种字符串,如果是不包含的需要判断一下p ...

  9. windows下开启mysql远程访问

    USE mysql;SELECT * FROM USER ; 直接修改user=root host=127.0.0.1为% FLUSH PRIVILEGES;

  10. Flyweight

    1 意图:运用共享技术有效地大量支持细粒度的对象 2 动机:flyweight是一个共享对象,可以在多个场景使用. 分为内部状态和外部状态,内部状态存储于flyweight中,包含了独立于flywei ...