offsetwidth表示对象的可见宽度。
例如:
{ # DIV1
宽度：100px；
身高：200px；
背景：红色；
}
结果：100
{ # DIV1
宽度：100px；
身高：200px；
背景：红色；
边境：2px黑色固体；
}
Results: 104 (100 + 2 + 2)
{ # DIV1
宽度：100px；
身高：200px；
背景：红色；
边境：2px黑色固体；
填料：20px；
}
结果：144（100±2＋2＋20＋20）
{ # DIV1
宽度：100px；
身高：200px；
背景：红色；
保证金：4px；
}
结果：100
* *
所以，offsetwidth =宽+填料+边界无关的边缘。
* *
下面举个例子：
offsetwidth
{ # DIV1
宽度：500px；
身高：200px；
背景：红色；
}
无功odiv = document.getelementbyid（'div1）；
setInterval（）{（）函数（
odiv.style.width = odiv.offsetwidth - 1 + 'px；
}，50）；
现象：红色的div逐渐缩小，直到消失，没有问题！
如果你给div添加一个边框，怎么样
offsetwidth
{ # DIV1
宽度：500px；
身高：200px；
背景：红色；
border: 1px solid黑；
}
无功odiv = document.getelementbyid（'div1）；
setInterval（）{（）函数（
odiv.style.width = odiv.offsetwidth - 1 + 'px；
}，50）；
现象：不仅红区不窄，而且越来越宽…
*
原因很简单：它是边境的直接原因，是因为offsetwidth边境计数，当首次定时轮询宽度：102 - 1 = = 101，然后offsetwidth 103立即改变；第二，宽度：103 - 1 = = 102，然后offsetwidth 104立即改变；其次是第三，宽度：104 - 1 = = 103，104 ...... offsetwidth
如果odiv.style.width = odiv.offsetwidth - 1 + PX；为2，然后红色的div不会移动，不宽或窄，因为offsetwidth 102减2等于100，和原来的宽度等于下一个周期，offsetwidth等于100加2或减2的边界100，它是不动...... *
这个解决办法很简单，但也隐藏不起一切不要用offsetwidth！
我们都知道，获得元素可以直接使用element.style.width行间的风格，但这种风格只在元素是用CSS，你不能得到它。
但是有办法做到这一点。
在伊江，element.currentstyle.width /元。currentstyle。{ 'width}；
在非IE，getcomputedstyle（元，假）{ 'width}
offsetwidth
{ # DIV1
宽度：500px；
身高：200px；
背景：红色；
border: 1px solid黑；
}
无功odiv = document.getelementbyid（'div1）；
功能getstyle（obj，ATTR）{
如果（obj。currentstyle）{ / /伊江
返回的对象。currentstyle {属性}；
{人}
返回getcomputedstyle（obj，false）{属性}；
}
}
警报（getstyle（odiv，'width '））； / /直接流行500px
上述这种封装，我们可以解决的问题offsetwidth。
offsetwidth
{ # DIV1
宽度：500px；
身高：200px；
背景：红色；
border: 1px solid黑；
}
无功odiv = document.getelementbyid（'div1）；
功能getstyle（obj，ATTR）{
如果（obj。currentstyle）{ / /伊江
返回的对象。currentstyle {属性}；
{人}
返回getcomputedstyle（obj，false）{属性}；
}
}
setInterval（）{（）函数（
/ / parseInt是因为getstyle（）返回一个PX乐队的单位，是一个整数。
odiv.style.width = parseInt（getstyle（odiv，'width '））- 1 + 'px；
}，30）；
以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。