这篇文章主要介绍了 Javascript 运动中 Offset 的 bug 解决方案, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
我们先来看看这个 bug 是怎么产生的。
- <style type="text/CSS">
- #div1 {
- width: 200px;
- height: 200px;
- background: red;
- }
- </style>
- <body>
- <div id="div1">
- </div>
- </body>
以下是用来测试的 Javascript 代码 ,目的是 让 div 慢慢变窄。
- <script type="text/javascript">
- setInterval(function(){
- var oDiv=document.getElementById("div1");
- oDiv.style.width=oDiv.offsetWidth-1+'px';
- },30);
- </script>
Javascript 代码 很简单,运行一下 没有任何问题,如愿的 div 在慢慢变小。
那这个 offset 的 bug 又是怎么来的呢?
下面我们动动样式 就会神奇的事情发生了。。。
我们给 div1 加个样式 border: 1px solid #CCCCFF;
- <style type="text/css">
- #div1 {
- width: 200px;
- height: 200px;
- background: red;
- border: 1px solid #CCCCFF;
- }
- </style>
此时在运行代码 ,发现 div 居然往右边慢慢增大。。。image BUG 惊现。。。。 明明是减 1 为什么会出现这种情况。
让我们想想 offset 有什么特点:
举例: div width : 200px border 1px 。 实际上他得到的 offsetWidth 是 202px 。
那么,我们说回来,运动刚开始的时候,实际上 div 的宽度是 200px 那么 offsetWidth 是 202
这个时候 oDiv.style.width=oDiv.offsetWidth-1+'px'; 这句话就是等于 oDiv.style.width=202-1=201px; 然后在赋值给 width
当再次执行这句话的时候 div 的宽度是 201px; 这样的话,每次都会增加 1px,反而慢慢变大了。 这就是 offset 的 bug 。
怎么解决这个问题呢?
其实不用这个 offsetWidth 就可以了 。 我们用 width !! 写个函数直接获取 css 样式中 width 即可
获取不在行间中的样式 :
- function getStyle(obj, name) {
- if (obj.currentStyle) {
- return obj.currentStyle[name];
- } else {
- return getComputedStyle(obj, null)[name];
- }
- }
那么我们在修改下原来的代码:
- <script type="text/javascript">
- setInterval(function(){
- var oDiv=document.getElementById("div1");
- oDiv.style.width=parseInt(getStyle(oDiv,'width'))-1+'px';
- },30);
- function getStyle(obj, name) {
- if (obj.currentStyle) {
- return obj.currentStyle[name];
- } else {
- return getComputedStyle(obj, null)[name];
- }
- }
- </script>
这样程序运行就不会有任何问题了。
来源: