管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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>

　　这样程序运行就不会有任何问题了。

教程首页 更多教程