想让一个块级元素的宽逐渐变大的动画效果，不用css3,用原生JS做的话，就要用定时器
用offsetWidth能取到元素宽度
offsetWidth是啥呢？内容宽度+padding+border
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生JS动画</title>
<style>
#div1{
width: 400px;
height: 400px;
background: #FF0;
}
</style>
</head>
<body>
<div id="div1">hhhhh</div>
<script>
var oDiv1 = document.getElementById("div1");
oDiv1.onclick = function(){
var timer = setInterval(function(){
// this.style.width = this.style.width + 10 +"px";这句不好使，取不到外联样式里的值
oDiv1.style.width = oDiv1.offsetWidth + 10 +"px";//offsetWidth 获取值不带单位
if(oDiv1.offsetWidth == 800){
clearInterval(timer);
}
},500)
}
</script>
</body>
</html>注意到上面的代码，，我们没用this获取当前对象，因为在定时器里，this指向window，那要是我一定要用this呢，请参照我的另一篇文章，this指向问题，问题就迎刃而解了
第一种 把this指向保存到一个变量里面，这样就不怕被定时器改成指向window了
var oDiv1 = document.getElementById("div1");
oDiv1.onclick = function(){
var _this = this;
var timer = setInterval(function(){
_this.style.width = _this.offsetWidth + 10 + "px";
if(_this.offsetWidth==500){
clearInterval(timer);
}
},50)
}第二种 在定时器处理函数后面绑定改变this指向的函数bind，只绑定，不调用，到时候他点击的时候自己调用
var oDiv1 = document.getElementById("div1");
oDiv1.onclick = function(){
var timer = setInterval(function(){
this.style.width = this.offsetWidth + 10 + "px";
if(this.offsetWidth==500){
clearInterval(timer);
}
}.bind(this),50)
}
1356
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
