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

在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. selenium杀掉浏览器进程方法

    * 杀掉浏览器进程      */     public static void operateWindowsProcess(){         WindowsUtils.tryToKillByNa ...

  2. [转](二)unity4.6Ugui中文教程文档-------概要-UGUI Canvas

    大家好,我是孙广东.   转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unityma ...

  3. Linux 休眠,挂起(待机),关机等几个命令的区别及如何实现;如何启用Ubuntu的休眠模式

    这里对linux 的几个命令整理下,有:休眠,挂起,待机,关机等几个命令的区别及如何实现. 休眠是一种更加省电的模式,它将内存中的数据保存于硬盘中,所有设备都停止工作.当再次使用时需按开关机键,机器将 ...

  4. CentOS 下开启.htaccess

    一般来说,htaccess文件是Apache服务器中的一个配置文件,它负责相关目录下的网页配置.通过htaccess文件,可以帮我们实现: 网页301重定向.自定义404错误页面.改变文件扩展名.允许 ...

  5. HTML基础(2)

    常见标签 1.img标签 <img src="图片地址" alt="图片名"/>  图片(单标签) alt属性 是图片名字,是给百度搜索引擎抓取使用 ...

  6. chain.doFilter(req, resp)

    web中的Filiter过滤器: 当req不改变时,filiter在web中的配置和顺序没有关系: 但当在filiter中将其改变类型时,会导致其改变的request类型包装层次过多,无法获取其中的参 ...

  7. python 中date datetime time 与str的互转

    以下全部引入 form datetime import datetime, timedelta import time 一.time 转str 二.datetime 转 str str_date = ...

  8. 【前端开发系列】—— 别说你不会Ajax

    之前一直都是用封装好的Ajax,所以一直很好奇它是如何使用和实现的.这里正好就进行一下学习,下面是Ajax的一个时间图. 设置触发条件 这里模拟一个使用场景,就是在用户登陆时,异步的对用户名以及密码进 ...

  9. 转:VC include 路径解析

    VC include 路径解析 要了解vc中使用#include命令包含头文件所搜寻的路径,必须先了解vc中的几种路径: 1. 系统路径 系统路径在vc中是"Tools->Option ...

  10. 浅谈HTTP协议(下)

    下面来讲响应消息.响应消息也分为响应起始行.响应头部.CRLF.响应主体. 响应起始行包括协议版本.响应状态码.原因短句.这里的重点就是响应状态码,它一共分为5类,状态码准确的说是一个三位数. 1xx ...