Javascript 运动中Offset的bug解决方案
我们先来看看这个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>
这样程序运行就不会有任何问题了。
-
在线地址, https://stackblitz.com/edit/vue-c98wtb?file=src%2Fcomponents%... 先把数据往下滚动一下,然后再点击 Recovery 按钮, 视图没有更新
-
本文向大家介绍写出几种IE6 bug的解决方法相关面试题，主要包含被问及写出几种IE6 bug的解决方法时的应答技巧和注意事项，需要的朋友参考一下 1）png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理. 2）IE6双倍边距bug：在该元素中加入display:inline 或 display:block 3）像素问题 使用多个float和注释引起的 使用d
-
本文向大家介绍Android中EditText光标在4.0中的bug及解决方法，包括了Android中EditText光标在4.0中的bug及解决方法的使用技巧和注意事项，需要的朋友参考一下 本文分析了Android中EditText光标在4.0中的bug及解决方法。分享给大家供大家参考，具体如下： 一、问题： 不知道为什么，我的EditText的在我自己的手机中出现的时候，他的光标就变得没有了，
-
本文向大家介绍JavaScript中Textarea滚动条不能拖动的解决方法，包括了JavaScript中Textarea滚动条不能拖动的解决方法的使用技巧和注意事项，需要的朋友参考一下 本文实例分析了JavaScript中Textarea滚动条不能拖动的解决方法。分享给大家供大家参考，具体如下： 在IE中，你是否碰到过Textarea的滚动条不能拖动，但点上下按钮可以滚动内容？ 这个问题的原因很
-
你可以看到，虽然我们有一些复制对象的方法，但是我们没有使它不可变，因为我们可以将episode的属性设置为8.另外，在这种情况下我们如何修改episode属性？ 我们通过调用assign： name: 'Star Wars', console.log(movie1.episode); // writes 7