简要说明一下offsetWidth的替换-CSDN博客

　　　前面几个例子中用到了offsetWidth这个属性，其实还有offsetTop,offsetHeight,offsetLeft等一些属性，总的来说这些都可以表示当前对象的一些属性值，可是在某些情况下，就可能引发一些不必要的问题，比如就offsetWidth来说，当用这个属性来获取目标的宽度时，当不给目标加边框时，基本不会有什么影响，可是在实际中一般多多少少都会有一些边框，这是就显示出一些问题，offsetWidth所获取的宽度并不是在css样式中指定的宽度，而是包含了边框与padding值，所以与要获取的目标值有一定区别，这个在单个物体运动中，当用offsetWidth来获取宽度时，给物体加上边框和不加效果完全不一样。

比如下面这段代码:

#div1{ width:100px;height:100px;background:red;border:1px solid black;}

window.onload = function()

{　　

　　var oBtn = document.getElementById("btn");

　　var oDiv = document.getElementById("div1");

　　oBtn.onclick = function()

　　{

　　　　setInterval(function(){

　　　　oDiv.style.width = oDiv.offsetWidth - 1+'px';

　　　　},30);

　　};

</script>

<body>

</body>

当然这只是举个比较简单的例子，比会发现这个div的宽度不会减少，相反还会增加，此时就有边框的影响了。所以在实际中，我个人感觉还是不要或者少用这个offsetWidth等一些属性，有个简单的方法可以避免这个问题，我们可以封装一个方法来获取非行间样式，下面这段应该就可以用用：

function getStyle(obj,arr){ 　　　　　　//两个参数，第一个是获取谁的，第二个是什么样式
if(obj.currentStyle){
return obj.currentStyle[arr]　　　　　　　　//写多个主要是为了浏览器兼容性问题
}else{
return getComputedStyle(obj,false)[arr]; //里面有两个参数，第一个是获取谁的，第二个参数不为空就行，后面是获取样式
}
}

所以刚才那段代码就可以写成这样：

oDiv.style.width = parseInt(getStyle(oDiv,'width')) - 1 +'px';　　　　　　//将获取的宽度转换成整数值

转载于:https://www.cnblogs.com/slientLove/p/5879053.html