• avascript 运动中Offset的bug解决方案


    这篇文章主要介绍了Javascript 运动中Offset的bug解决方案,需要的朋友可以参考下

    我们先来看看这个bug 是怎么产生的。

    代码如下:

    1 <style type="text/css">
    2             #div1 {
    3                 width: 200px;
    4                 height: 200px;
    5                 background: red;
    6                 
    7             }
    8 </style>

    代码如下:

     
    1 <body>
    2         <div id="div1">
    3             
    4         </div>
    5     </body>

    以下是用来测试的Javascript代码 ,目的是 让div慢慢变窄。

    代码如下:

    1 <script type="text/javascript">
    2             setInterval(function(){
    3                 var oDiv=document.getElementById("div1");
    4                 
    5                 oDiv.style.width=oDiv.offsetWidth-1+'px';
    6                 
    7             },30);
    8  </script>

    Javascript 代码 很简单,运行一下 没有任何问题,如愿的div在慢慢变小。

    那这个offset 的bug又是怎么来的呢?

    下面我们动动样式 就会神奇的事情发生了。。。

    我们给div1 加个样式 border: 1px solid #CCCCFF;

    代码如下:

    1 <style type="text/css">
    2             #div1 {
    3                 width: 200px;
    4                 height: 200px;
    5                 background: red;
    6                 border: 1px solid #CCCCFF;
    7             }
    8 </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 即可

    获取不在行间中的样式 :

    代码如下:

    1 function getStyle(obj, name) {
    2                 if (obj.currentStyle) {
    3                     return obj.currentStyle[name];
    4                 } else {
    5                     return getComputedStyle(obj, null)[name];
    6                 }
    7  }
    8  

    那么我们在修改下原来的代码:

    代码如下:

     1 <script type="text/javascript">
     2             setInterval(function(){
     3                 var oDiv=document.getElementById("div1");
     4                 oDiv.style.width=parseInt(getStyle(oDiv,'width'))-1+'px';
     5             },30);
     6             function getStyle(obj, name) {
     7                 if (obj.currentStyle) {
     8                     return obj.currentStyle[name];
     9                 } else {
    10                     return getComputedStyle(obj, null)[name];
    11                 }
    12             }
    13 </script>


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

  • 相关阅读:
    Codeforces Round #590 D. Distinct Characters Queries
    线段树模板加模板题POJ3468
    hihoCoder挑战赛5 C 与链
    HDU 5044 Tree 树链剖分
    HYSBZ 1901 Dynamic Rankings 树状数组套主席树
    POJ 2761 Feed the dogs 主席树
    POJ 2104 K-th Number 主席树 区间第K大
    HDU 4547 CD操作 LCA
    POJ 1470 Closest Common Ancestors 离线LCA
    HYSBZ 1036 树的统计Count 树链剖分 线段树
  • 原文地址:https://www.cnblogs.com/hl-520/p/4244235.html
走看看 - 开发者的网上家园