JS中offsetWidth的bug及处理方法
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JS中offsetWidth的bug及处理方法,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3634字,纯文字阅读大概需要6分钟。
内容图文
![JS中offsetWidth的bug及处理方法](/upload/InfoBanner/zyjiaocheng/302/f81d75fa4d0a426cb090ad1167396284.jpg)
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及处理方法的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的JS中offsetWidth的bug及处理方法全部内容,希望文章能够帮你解决JS中offsetWidth的bug及处理方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。