這篇文章主要為大家詳細介紹了JavaScript中offsetWidth的bug及解決方法，具有一定的參考價值，有興趣的小夥伴們可以參考一下
offsetWidth表示物件的可見寬度。
例如：
#p1 {
width: 100px;
height: 200px;
background: red;
}登入後複製
結果：100
#p1 {
width: 100px;
height: 200px;
background: red;
border: 2px solid black;
}登入後複製
結果：104 (100 + 2 + 2)
#p1 {
width: 100px;
height: 200px;
background: red;
border: 2px solid black;
padding: 20px;
}登入後複製
結果：144 （100 + 2 + 2 + 20 + 20）
#p1 {
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">
#p1 {
width: 500px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<p id="p1"></p>
<script type="text/javascript">
var op = document.getElementById('p1');
setInterval(function() {
op.style.width = op.offsetWidth - 1 + 'px';
}, 50);
</script>
</body>
</html>登入後複製
現象：紅色p逐漸變窄，直到消失，沒問題！
如果給p加一個border，呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>offsetWidth</title>
<style type="text/css">
#p1 {
width: 500px;
height: 200px;
background: red;
border: 1px solid black;
}
</style>
</head>
<body>
<p id="p1"></p>
<script type="text/javascript">
var op = document.getElementById('p1');
setInterval(function() {
op.style.width = op.offsetWidth - 1 + 'px';
}, 50);
</script>
</body>
</html>登入後複製
現象：紅色p不只沒有變窄，反而越來越寬…
*
原因也很簡單：就是border的直接原因，因為offsetWidth是把border算進去的，計時器輪詢的時候，第一次，width : 102 - 1 == 101 ,那麼offsetWidth立刻就變成103；第二次， width: 103 - 1 == 102, 那麼offsetWidth立刻就變成104；緊接著第三次，width: 104 - 1 == 103, offsetWidth就為104了…
#倘若把op.style.width = op.offsetWidth - 1 + 'px'; 換成-2，那麼紅色p就不動了，不會變寬也不會變窄，因為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">
#p1 {
width: 500px;
height: 200px;
background: red;
border: 1px solid black;
}
</style>
</head>
<body>
<p id="p1"></p>
<script type="text/javascript">
var op = document.getElementById('p1');
function getStyle(obj, attr) {
if (obj.currentStyle) {//IE
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
alert(getStyle(op, 'width'));//直接弹出 “500px”
</script>
</body>
</html>登入後複製
有了上面的這個封裝，我們就可以解決offsetWidth帶來的困擾了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>offsetWidth</title>
<style type="text/css">
#p1 {
width: 500px;
height: 200px;
background: red;
border: 1px solid black;
}
</style>
</head>
<body>
<p id="p1"></p>
<script type="text/javascript">
var op = document.getElementById('p1');
function getStyle(obj, attr) {
if (obj.currentStyle) {//IE
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
setInterval(function() {
//parseInt是因为getStyle()返回的是‘px'带单位，要整数化
op.style.width = parseInt(getStyle(op, 'width')) - 1 + 'px';
}, 30);
</script>
</body>
</html>登入後複製
【相關推薦】
1. Javacript免費影片教學
#2 . JavaScript表單驗證實作程式碼_javascript技巧
3. 單行JS 實作行動裝置金錢格式檢定
4. vue v -model表單控制項綁定的實例教學
5. Bootstrap 表單驗證formValidation 的實例詳解
#
以上是JS中offsetWidth的bug及處理方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
