js运动-offsetWidth和offsetHeight引发的血案

最新推荐文章于 2025-05-29 15:40:25 发布

关耳佳

最新推荐文章于 2025-05-29 15:40:25 发布

阅读量8.9k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： JS小记文章标签： offsetWidth currentStyle getComputedStyle js多物体运动

本文链接：https://blog.youkuaiyun.com/u014205965/article/details/45772539

本文探讨了JavaScript运动中使用offsetWidth和offsetHeight获取元素尺寸时遇到的问题，由于它们包含border和padding，可能导致意料之外的效果。文章通过实例展示了在元素运动时，加了border和padding后元素宽度不会变窄的困扰。解决方案是使用getComputedStyle或currentStyle（IE）来获取元素自身宽度，不包括border和padding。通过封装getStyle函数，实现了浏览器兼容的尺寸获取方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前说的js运动不管是单物体运动，多物体运动，还是缓冲运动。在获取元素自身宽，高的时候用的都是offsetWidth，offsetHeight，但是这会引发一些麻烦！！因为在js中offsetWidth，offsetHeight获取的不仅仅是元素样式中定义的width，height还包括给元素设置的border和padding的值

看看下面的测试例子：

<style>
        #div1{
            width:200px;height: 100px;
            background: green;
            /*border: 5px solid #c00;
            padding: 5px;*/
        }
</style>

<body>
<div id="div1" onclick="test();"></div>
<script>
    function test() {
        var oDiv = document.getElementById('div1');
        alert("offsetWidth 获取的值是："+oDiv.offsetWidth);
        alert("offsetWidth 获取的值是："+oDiv.offsetHeight);
    }
</script>
</body>

不加border和padding的时候，弹出的值都是200和100，加了border和padding结果就成了220和120，所以of