offsetWidth,offsetHeight 等offset...使用时的bug

最新推荐文章于 2021-05-06 15:14:27 发布

C5644112590822

最新推荐文章于 2021-05-06 15:14:27 发布

阅读量155

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/JSBlog/archive/2013/05/10/3070305.html

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
    #div1{position:absolute;width:100px;height:100px;background:#ccc;left:0px;border:1px red solid;}
    #txt{position:absolute;left:500px;}
</style>
    <script>
    window.onload=function(){
        oDiv=document.getElementById("div1");                
        oDiv.onmouseover=function()
        {        
            Move(200);    
        }
        oDiv.onmouseout=function()
        {        
            Move(100);
        }            
    }
        
    function Move(itarget)
    {
        oDiv=document.getElementById("div1");    
            
        setInterval(function()
        {    
                oDiv.style.width=oDiv.offsetWidth-1+"px";      
　　　　　　　　　　//加上border时  width不减反加  offsetWidth 计算的是盒模型尺寸 包括margin padding  border width  
//border 为1时 offsetWidth 为102 
                oTxt.value=offsetWidth;                
        },30)        
    }

</script>
</head>

<body>
    <div id="div1"></div>   
</body>
</html>

其实遇到这个bug很正常，js中offset...计算的是盒模型尺寸，即包括margin padding  border width。比如，border 为1时，offsetWidth的实际值为102，

oDiv.offsetWidth-1
102-1
101+2-1
102+2-1
...
...
以此类推，所以运动是不减反增。

关于写运动时，这个bug的解决办法是使用 obj.currentStyle[attr]和getComputedStyle(obj,...)[attr],详细代码整理如下。
getStyle（getComputedStyle currentstyle） 获取非行间样式函数封装

转载于:https://www.cnblogs.com/JSBlog/archive/2013/05/10/3070305.html

C5644112590822

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
offsetWidth,offsetHeight 等offset...使用时的bug

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>...
复制链接

扫一扫