当前位置：首页 > 全部内容 > 正文

JavaScript动画进阶：解决offsetWidth与样式获取问题

作者：微光

时间：2026-10-30

浏览：615

本文深入探讨JavaScript动画开发中的常见陷阱，重点分析offsetWidth包含边框导致的尺寸计算偏差，并通过封装兼容IE与Firefox的getStyle函数解决样式获取问题。文章进一步演示了如何通过参数化封装实现宽度、高度及透明度的通用动画库，解决了浮点数精度误差及不同属性单位的处理逻辑。

文章目录

引言与问题背景

在前文介绍了基础的JavaScript动画实现后，本文将针对代码重构过程中遇到的典型问题进行剖析，并提供相应的解决方案。

offsetWidth与边框导致的尺寸计算偏差

回顾之前多物体宽度变化的案例，若为元素添加边框样式（如 border: 4px solid #000;），会发现鼠标移出后元素宽度并未恢复至预期的200px。这一现象的产生原因需要通过新案例进行详细推导。

HTML结构如下： <div id="div1">hello</div> CSS样式设定为： body,div{ margin: 0px; padding: 0px; } div{ width: 200px; height: 200px; background: red; border: 1px solid #000;} 对应的JavaScript代码如下：


window.onload = function(){
  startMove();    
}
function startMove(){
  setInterval(function(){
    var oDiv = document.getElementById('div1');
    oDiv.style.width = oDiv.offsetWidth-1+'px';
  },30)
}

/*此时的效果为宽度不断增加
 * 加上border: 2px solid #000;之后，不断增大
 * 原因：当前的宽为202，减一后为201，大于200
 * 改变：oDiv.offsetWidth-2
 * 结果：宽永远为200px
 * 改变：字行内样式中加宽为200px<div id="div1" style="width: 200px;"></div>
 * 结果：改变border的值，可以得到宽度减小的效果
 * 思考：使用getStyle函数
 */

引入getStyle函数解决兼容性问题

初步判断问题源于offsetWidth属性的计算机制，因此引入getStyle函数以兼容IE和Firefox浏览器环境。


function getStyle(obj,attr){
  if(obj.currentStyle){//ie
  return obj.currentStyle[attr];
}
  else{//firefox
    return getComputedStyle(obj,false)[attr];
  }
}

随后对原代码 oDiv.style.width = oDiv.offsetWidth-1+'px'; 进行修改，优化后的代码如下：

oDiv.style.width = parseInt(getStyle(oDiv,'width'))-1+'px';

此时，元素宽度能够持续减小。为进一步完善功能，继续对代码进行迭代。

在CSS中增加字体设置： div{ font-size: 12px;color: #fff;} 在JavaScript中同步调整字体大小： oDiv.style.fontSize = parseInt(getStyle(oDiv,'fontSize'))+1+'px'; 此时页面效果表现为宽度不断减小，同时字体逐渐增大。此阶段主要旨在掌握getStyle函数的具体用法。

回到多物体动画场景，将原代码中的 obj.offsetWidth 替换为 parseInt(getStyle(obj,'width'))。通过对比图片可以直观看到两者差异：

引言与问题背景

观察发现，parseInt(getStyle(obj,'width')) 在代码中多次出现。为提高代码可读性与执行效率，将其赋值给变量 icur，优化后的代码如下：


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      body,ul,li{
        margin: 0px;
        padding: 0px;
      }
      ul,li{
        list-style: none;
      }
      ul li{
        width: 200px;
        height: 100px;
        background: yellow;
        margin-bottom: 20px;
        border: 4px solid #000;
      }
    </style>
    <script type="text/javascript">
      window.onload = function(){
        var aLi = document.getElementsByTagName('li');
        for(var i = 0; i< aLi.length; i++){
          aLi[i].timer = null;
          aLi[i].onmouseover = function(){
            startMove(this,400);
          }
          aLi[i].onmouseout = function(){
            startMove(this,200);
          }
        } 
      }
      function startMove(obj,iTarget){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
          var icur = parseInt(getStyle(obj,'width'));
          //将parseInt(getStyle(obj,'width'))赋值给变量icur
          var speed = (iTarget - icur)/10;
          speed = speed>0?Math.ceil(speed):Math.floor(speed);
          if(iTarget == icur){
            clearInterval(obj.timer);
          }
          else{
            //obj.style.width = icur+speed+'px';
            obj.style['width'] = icur+speed+'px';
          }
        },30)
      }
      function getStyle(obj,attr){
        if(obj.currentStyle){
          return obj.currentStyle[attr];
        }
        else
        {
          return getComputedStyle(obj,false)[attr];
        }
      }
    </script>
  </head>
  <body>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </body>
</html>

多物体差异化动画封装

至此，单一属性的动画效果已实现。若需实现第一个li元素改变宽度、第二个li元素改变高度的差异化效果，应如何处理？

解决思路：在li元素中增加id标识，根据不同条件执行相应逻辑，示例代码为：<li id="li1"></li> <li id="li2"></li>

具体实现如下：


window.onload = function(){
  var Li1 = document.getElementById('li1');
  var Li2 = document.getElementById('li2');
  Li1.onmouseover = function(){
    startMove(this,400);
  }
  Li1.onmouseout = function(){
    startMove(this,100)
  }
  Li2.onmouseover = function(){
    startMove1(this,400);
  }
  Li2.onmouseout = function(){
    startMove1(this,200)
  }
}
       
function startMove(obj,iTarget){
  clearInterval(obj.timer);
  obj.timer = setInterval(function(){
    var icur = parseInt(getStyle(obj,'height'));
    var speed = (iTarget - icur)/10;
    speed = speed>0?Math.ceil(speed):Math.floor(speed);
    if(iTarget == icur){
      clearInterval(obj.timer);
    }
    else{
      obj.style['height'] = icur+speed+'px';
    }
  },30)
}
 
function startMove1(obj,iTarget){
  clearInterval(obj.timer);
  obj.timer = setInterval(function(){
    var icur = parseInt(getStyle(obj,'width'));
    var speed = (iTarget - icur)/10;
    speed = speed>0?Math.ceil(speed):Math.floor(speed);
    if(iTarget == icur){
      clearInterval(obj.timer);
    }
    else{
      obj.style['width'] = icur+speed+'px';
    }
  },30)
}
 
function getStyle(obj,attr){
  if(obj.currentStyle){//ie
    return obj.currentStyle[attr];
  }
  else
  {
    return getComputedStyle(obj,false)[attr];
  }
}
 

该方案实现了鼠标悬停第一个元素时改变高度，悬停第二个元素时改变宽度的效果。同时，注意到原代码中存在大量重复逻辑，沿用之前的封装思路，将差异部分提取为参数传入，即可达到预期效果（此处通过参数attr区分width和height），代码如下：


window.onload = function(){
  var Li1 = document.getElementById('li1');
  var Li2 = document.getElementById('li2');
  Li1.onmouseover = function(){
    startMove(this,'height',400);
  }
  Li1.onmouseout = function(){
    startMove(this,'height',100)
  }
  Li2.onmouseover = function(){
    startMove(this,'width',400);
  }
  Li2.onmouseout = function(){
    startMove(this,'width',200)
  }
}
       
function startMove(obj,attr,iTarget){
  clearInterval(obj.timer);
  obj.timer = setInterval(function(){
    var icur = parseInt(getStyle(obj,attr));
    var speed = (iTarget - icur)/10;
    speed = speed>0?Math.ceil(speed):Math.floor(speed);
    if(iTarget == icur){
      clearInterval(obj.timer);
    }
    else{
      obj.style[attr] = icur+speed+'px';
    }
  },30)
}

透明度动画与浮点误差处理

接下来尝试实现透明度的动态变化。

CSS中定义透明度： ul li{ filter:alpha(opacity:30);opacity:0.3;}

JavaScript相关逻辑如下：


window.onload = function(){
  var Li1 = document.getElementById('li1');
  var Li2 = document.getElementById('li2');
  Li1.onmouseover = function(){
    startMove(this,'opacity',100);
  }
  Li1.onmouseout = function(){
    startMove(this,'opacity',30)
  }
}

运行后发现，结果并未符合预期。

原因分析：假设1：宽度通常为整型数值，而opacity的取值范围为0到1；假设2：opacity属性本身不带单位。

修改方案1：增加类型判断，当传入属性为opacity时，使用parseFloat进行解析，代码如下：


var icur = 0;
if(attr == 'opacity'){
  icur = parseFloat(getStyle(obj,attr))*100;
}else{
  icur = parseInt(getStyle(obj,attr));
}

修改方案2：进一步增加判断逻辑。


if(iTarget == icur){
  clearInterval(obj.timer);
}
else{
if(attr = 'opacity'){
  obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';
  obj.style.opacity = (icur+speed)/100;
}
else{
obj.style[attr] = icur+speed+'px';
}
}

修改后我们在浏览器下，仍能发现问题，就是opacity的值比1大了一点点

原因分析：计算机浮点运算存在固有误差，导致计算结果出现微小偏差。

修改方案：在赋值前增加Math.round函数，对小数部分进行四舍五入处理，代码如下


var icur = 0;
if(attr == 'opacity'){
  icur = Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
  icur = parseInt(getStyle(obj,attr));
}

至此，动画效果已基本完善，完整代码如下：


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      body,ul,li{
        margin: 0px;
        padding: 0px;
      }
      ul,li{
        list-style: none;
      }
      ul li{
        width: 200px;
        height: 100px;
        background: yellow;
        margin-bottom: 20px;
        border: 4px solid #000;
        filter:alpha(opacity:30);
        opacity:0.3;
      }
    </style>
    <script type="text/javascript">
      window.onload = function(){
        var Li1 = document.getElementById('li1');
        var Li2 = document.getElementById('li2');
        Li1.onmouseover = function(){
          startMove(this,'opacity',100);
        }
        Li1.onmouseout = function(){
          startMove(this,'opacity',30)
        }
      }
     
      function startMove(obj,attr,iTarget){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
          var icur = 0;
          if(attr == 'opacity'){
            icur = Math.round(parseFloat(getStyle(obj,attr))*100);
          }else{
            icur = parseInt(getStyle(obj,attr));
          }
          var speed = (iTarget - icur)/10;
          speed = speed>0?Math.ceil(speed):Math.floor(speed);
          if(iTarget == icur){
            clearInterval(obj.timer);
          }
          else{
            if(attr = 'opacity'){
              obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';
              obj.style.opacity = (icur+speed)/100;
            }
            else{
              obj.style[attr] = icur+speed+'px';
            }
          }
        },30)
      }   
       
      function getStyle(obj,attr){
        if(obj.currentStyle){
          return obj.currentStyle[attr];
        }
        else
        {
          return getComputedStyle(obj,false)[attr];
        }
      }
    </script>
  </head>
  <body>
    <ul>
      <li id="li1"></li>
    </ul>
  </body>
</html>

通过上述优化，我们实现了对运动过程中任意属性值的灵活控制。

不知不觉中，一个简单的动画功能已被封装为一个基础的JavaScript动画库。后续章节将继续对该库进行功能补充与扩展。

以上就是本文的全部内容，希望对各位的学习有所帮助，也欢迎大家继续支持本站。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›
作者最新文章

JavaScript零基础入门：从环境搭建到运行第一段代码

HTML链接中javascript：void(0)的作用及现代替代方案

在线调试 JS 时怎么引入 jQuery 或 Vue 等第三方库

原生JavaScript实现简易颜色选择器原理与代码

JS原生表单序列化：FormData与URLSearchParams用法详解

相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JS 解压出现乱码或报错怎么解决？
JavaScript常见SyntaxError语法错误排查与修复方法
JS动态构建复杂嵌套JSON对象的方法