JavaScript中在中间的病菌及解决方法

在中间表示对象的可见宽度。比如：

# div1 { width: 100px高度： 200像素；背景：红色；}结果：100

# div1 { width: 100px高度： 200像素；背景：红色；border: 2px纯黑；}结果：104 (100 2 2)

# div1 { width: 100px高度： 200像素；背景：红色；border: 2px纯黑；padding: 20px }结果：144 (100 2 2 20 20)

# div1 { width: 100px高度： 200像素；背景：红色；margin: 4px}结果：100

**

所以，偏移量=填充边框的宽度，和边缘无关。

** 下面来看一个例子：

！DOCTYPE html html head meta charset=' utf-8 ' title offsetwitts/title style type=' text/CSS ' # div 1 { width : 500 px；高度： 200像素；背景：红色；}/style/head body div id=' div 1 '/div脚本类型=' text/JavaScript ' var Odiv=document。getelementbyid(' div 1 ')；setInterval(function(){ odiv。风格。宽度=odiv。offset with-1 ' px '；}, 50);/脚本/正文/html现象：红色差异逐渐变窄，直到消失，没问题！

如果给差异加一个边界，呢？

！DOCTYPE html html head meta charset=' utf-8 ' title offsetwitts/title style type=' text/CSS ' # div 1 { width : 500 px；高度： 200像素；背景：红色；border: 1px纯黑；}/style/head body div id=' div 1 '/div脚本类型=' text/JavaScript ' var Odiv=document。getelementbyid(' div 1 ')；setInterval(function(){ odiv。风格。宽度=odiv。offset with-1 ' px '；}, 50);/脚本/正文/html现象：红色差异不仅没有变窄，反而越来越宽……

*

原因也很简单：就是边界的直接原因，因为在中间是把边界算进去的，定时器轮询的时候，第一次，宽度： 102 - 1==101,那么在中间立马就变为103;第二次，width: 103 - 1==102，那么在中间立马就变为104;紧接着第三次，宽度： 104 - 1==103,偏移量就为104了……

倘若把奥迪夫。风格。宽度=odiv。offset with-1 ' px '；换成-2,那么红色差异就不动了，不会变宽也不会变窄，因为在中间为102,减去2就是100和原本的宽度相等，下一次循环，偏移就等于100加上边界的2,再减去2还是100,所以不动……*

解决方案也很简单，惹不起还躲不起？不用在中间了！

我们都知道，获取元素的行间样式直接用元素。样式。宽度即可，但是这只针对元素的行间样式，如果写在钢性铸铁中，你就获取不到了。

但也是有办法的：

工业管理学(工业工程)中用元素。当前样式。宽度/元素。当前样式。[' width ']；非工业管理学(工业工程)中用getComputedStyle(元素，false)['width']！DOCTYPE html html head meta charset=' utf-8 ' title offsetwitts/title style type=' text/CSS ' # div 1 { width : 500 px；高度： 200像素；背景：红色；border: 1px纯黑；}/style/head body div id=' div 1 '/div脚本类型=' text/JavaScript ' var Odiv=document。getelementbyid(' div 1 ')；函数getStyle(obj，attr){ if(obj。currentstyle){//IE返回物体。current style[attr]；} else { return getComputedStyle(obj，false)[attr]；} } alert(getStyle(oDiv，‘width’)；//直接弹出“500像素”脚本/正文/html有了上面的这个封装，我们就可以解决在中间带来的困扰了

！DOCTYPE html html head meta charset=' utf-8 ' title offsetwitts/title style type=' text/CSS ' # div 1 { width : 500 px；高度： 200像素；背景：红色；border: 1px纯黑；}/style/head body div id=' div 1 '/div脚本类型=' text/JavaScript ' var Odiv=document。getelementbyid(' div 1 ')；函数getStyle(obj，attr){ if(obj。currentstyle){//IE返回物体。current style[attr]；} else { return getComputedStyle(obj，false)[attr]；} } setInterval(函数(){ //parseInt是因为getStyle()返回的是px '带单位，要整数化oDiv。风格。width=parsent(getStyle(oDiv，' width ')-1 ' px '；}, 30);/脚本/正文/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。