简要说明一下offsetWidth的替换
Posted 愚小子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简要说明一下offsetWidth的替换相关的知识，希望对你有一定的参考价值。
前面几个例子中用到了offsetWidth这个属性，其实还有offsetTop,offsetHeight,offsetLeft等一些属性，总的来说这些都可以表示当前对象的一些属性值，可是在某些情况下，就可能引发一些不必要的问题，比如就offsetWidth来说，当用这个属性来获取目标的宽度时，当不给目标加边框时，基本不会有什么影响，可是在实际中一般多多少少都会有一些边框，这是就显示出一些问题，offsetWidth所获取的宽度并不是在css样式中指定的宽度，而是包含了边框与padding值，所以与要获取的目标值有一定区别，这个在单个物体运动中，当用offsetWidth来获取宽度时，给物体加上边框和不加效果完全不一样。
比如下面这段代码:
#div1{ width:100px;height:100px;background:red;border:1px solid black;}
<script>
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>
<input type="button" id="btn" value="开始运动">
<div id="div1"></div>
</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‘; //将获取的宽度转换成整数值
以上是关于简要说明一下offsetWidth的替换的主要内容，如果未能解决你的问题，请参考以下文章