js offsetWidth的坑
2018-03-09 本文已影响0人
super静_jingjing
offsetWidth 在官方文档解释就是：实际的width+borderWidth+padding+scrollbar
最近在做项目，发现了一个offsetWidth的坑；
用一个简单功能展示一下这个坑：一个div不匀速的变宽
正常情况：没有边距的div，只有width
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
height: 100px;
width: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
<script>
window.onload=function(){
var div1 = document.getElementById("div1");
setInterval(function(){
div1.style.width = div1.offsetWidth -1 + "px";
},30);
}
</script>
以上代码是正常情况，能1px的减小到div消失
但是如果我给div加上border，并且在该div下打印出宽度
页面运行效果竟然是变宽了，原本宽度只有100px；
看下图就能看出运行结果
image.png
这个貌似就是offsetWidth的一个bug，没有什么实际的解决办法，只能换一种方式
注意：width值不能使用style.width的方式，style.width只能用来赋值，这样方式只能获取到行间样式，以上div的样式是内部样式，是拿不到的
后面改成使用currentStyle ，用getComputedStyle适配火狐，封住成一个公共方法：
obj：元素对象，如 document.getElementById("div1")
attr：获得的属性，如width
function getStyle(obj, attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj, false)[attr];
}
}
