這篇文章主要為大家詳細介紹了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算進去的,
定時器<!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>
以上是JavaScript中關於offsetWidth的bug問題以及解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!