JavaScript中offsetWidth的bug及解决方法


Posted in Javascript onMay 17, 2017

offsetWidth表示对象的可见宽度。
比如:

#div1 {
 width: 100px;
 height: 200px;
 background: red;
}

结果:100

#div1 {
 width: 100px;
 height: 200px;
 background: red;
 border: 2px solid black;
}

结果:104 (100 + 2 + 2)

#div1 {
 width: 100px;
 height: 200px;
 background: red;
 border: 2px solid black;
 padding: 20px;
}

结果:144 (100 + 2 + 2 + 20 + 20)

#div1 {
 width: 100px;
 height: 200px;
 background: red;
 margin: 4px;
}

结果:100

**

所以,offsetWidth = width + padding + border, 和margin无关。

**
下面来看一个例子:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>offsetWidth</title>
 <style type="text/css">
  #div1 {
   width: 500px;
   height: 200px;
   background: red;
  }
 </style>
</head>
<body>
 <div id="div1"></div>
 <script type="text/javascript">
  var oDiv = document.getElementById('div1');
  setInterval(function() {
   oDiv.style.width = oDiv.offsetWidth - 1 + 'px';
  }, 50);
 </script>
</body>
</html>

现象:红色div逐渐变窄,直到消失,没问题!

如果给div加一个border,呢?

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>offsetWidth</title>
 <style type="text/css">
  #div1 {
   width: 500px;
   height: 200px;
   background: red;
   border: 1px solid black;
  }
 </style>
</head>
<body>
 <div id="div1"></div>
 <script type="text/javascript">
  var oDiv = document.getElementById('div1');
  setInterval(function() {
   oDiv.style.width = oDiv.offsetWidth - 1 + 'px';
  }, 50);
 </script>
</body>
</html>

现象:红色div不仅没有变窄,反而越来越宽……

JavaScript中offsetWidth的bug及解决方法*

原因也很简单:就是border的直接原因,因为offsetWidth是把border算进去的,定时器轮询的时候,第一次,width : 102 - 1 == 101 ,那么offsetWidth立马就变为103;第二次,width: 103 - 1 == 102, 那么offsetWidth立马就变为104;紧接着第三次,width: 104 - 1 == 103, offsetWidth就为104了……

倘若把 oDiv.style.width = oDiv.offsetWidth - 1 + ‘px'; 换成 -2,那么红色div就不动了,不会变宽也不会变窄,因为offsetWidth为102,减去2就是100和原本的width相等,下一次循环,offsetWidth就等于100加上border的2,再减去2还是100,所以不动……*

解决方案也很简单,惹不起还躲不起?不用offsetWidth了!

我们都知道,获取元素的行间样式直接用element.style.width即可,但是这只针对元素的行间样式,如果写在css中,你就获取不到了.

但也是有办法的:

  • IE中用element.currentStyle.width / element.currentStyle.[‘width'];
  • 非IE中用getComputedStyle(element, false)[‘width']
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>offsetWidth</title>
 <style type="text/css">
  #div1 {
   width: 500px;
   height: 200px;
   background: red;
   border: 1px solid black;
  }
 </style>
</head>
<body>
 <div id="div1"></div>
 <script type="text/javascript">

  var oDiv = document.getElementById('div1');
  function getStyle(obj, attr) {
   if (obj.currentStyle) {//IE
    return obj.currentStyle[attr];
   } else {
    return getComputedStyle(obj, false)[attr];
   }
  }
  alert(getStyle(oDiv, 'width'));//直接弹出 “500px”
 </script>
</body>
</html>

有了上面的这个封装,我们就可以解决offsetWidth带来的困扰了

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>offsetWidth</title>
 <style type="text/css">
  #div1 {
   width: 500px;
   height: 200px;
   background: red;
   border: 1px solid black;
  }
 </style>
</head>
<body>
 <div id="div1"></div>
 <script type="text/javascript">
  var oDiv = document.getElementById('div1');
  function getStyle(obj, attr) {
   if (obj.currentStyle) {//IE
    return obj.currentStyle[attr];
   } else {
    return getComputedStyle(obj, false)[attr];
   }
  }
  setInterval(function() {
   //parseInt是因为getStyle()返回的是‘px'带单位,要整数化
   oDiv.style.width = parseInt(getStyle(oDiv, 'width')) - 1 + 'px';
  }, 30);
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的Math 使用介绍
Apr 21 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
Jquery 实现弹出层插件
Jan 28 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
Jul 13 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
Jan 09 Javascript
在Mac下彻底卸载node和npm的方法
May 16 Javascript
angular2路由之routerLinkActive指令【推荐】
May 30 Javascript
JavaScript变量基本使用方法实例分析
Nov 15 Javascript
vue-路由精讲 二级路由和三级路由的作用
Aug 06 Javascript
Vue+Spring Boot简单用户登录(附Demo)
Nov 12 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
May 17 #Javascript
基于vue+ bootstrap实现图片上传图片展示功能
May 17 #Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 #Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 #Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 #Javascript
vue之nextTick全面解析
May 17 #Javascript
Vue.js学习教程之列表渲染详解
May 17 #Javascript
You might like
php在字符串中查找另一个字符串
2008/11/19 PHP
PHP 字符串 小常识
2009/06/05 PHP
php中如何防止表单的重复提交
2013/08/02 PHP
php从字符串创建函数的方法
2015/03/16 PHP
php生成Android客户端扫描可登录的二维码
2016/05/13 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
jquery()函数的三种语法介绍
2013/10/09 Javascript
纯javascript制作日历控件
2015/07/17 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
详解vue.js的devtools安装
2017/05/26 Javascript
详解AngularJS2 Http服务
2017/06/26 Javascript
Vue press 支持图片放大功能的实例代码
2018/11/09 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
[14:50]2018DOTA2亚洲邀请赛开幕式
2018/04/03 DOTA
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
Python enumerate() 函数如何实现索引功能
2020/06/29 Python
用Python自动清理系统垃圾的实现
2021/01/18 Python
详解pandas映射与数据转换
2021/01/22 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
美国成衣女装品牌:CHICO’S
2016/09/19 全球购物
全球速卖通:AliExpress(国际版淘宝)
2017/09/20 全球购物
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
ALDO加拿大官网:加拿大女鞋品牌
2018/12/22 全球购物
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
商务英语毕业生自荐信范文
2013/11/08 职场文书
业务副厂长岗位职责
2014/01/03 职场文书
国际金融专业自荐信
2014/07/05 职场文书
奶茶店创业计划书
2014/08/14 职场文书
小学生九一八纪念日83周年演讲稿500字
2014/09/17 职场文书
2015年八一建军节活动总结
2015/03/20 职场文书
小学教师节活动总结
2015/03/20 职场文书
居委会工作总结2015
2015/05/18 职场文书