标签：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{widht：200px;height:200px; background:#f00; border:4px solid black;}</style>
<script> window.onload=function(){ var oDiv=document.getElementById("div1"); oDiv.onclick=function(){ startMove(); } } var timer=null; function startMove(){ clearInterval(timer); timer=setInterval(function(){ var oDiv=document.getElementById("div1"); oDiv.style.width=oDiv.offsetWidth-1+"px"; },50) }
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
问题一：var timer=null 必须放在全局定义，函数内部定义无效果，为什么？
思考结果：因为，每一次点击div，都会另外开启一个定时器，而在函数内部定义timer，只是一个局部变量timer，无法影响已经开启的timer，所以需要将timer定义在全局，以便所有定时器都共用这一个timer
问题二.为什么增加1像素边框后，div未按预期的逐渐减小，而是逐渐增大呢？
因为：offsetWidht值是指div的宽度加上它的边（widht+border），所以：计时器开始计时第一次，将offsetWidth值-1后，实际将div的宽度变为了201px;然后依次类推，每次都会增加1像素，和原本期望的结果恰好相反。
解决办法：将div的widht值改为行内样式，即<div id="div1" style="widht:200px">,同时修改代码 oDiv.style.width=oDiv.offsetWidth-1+"px"; 改为：oDiv.style.width=parseInt(oDiv.style.width)-1+"px";
关键点将offsetWidth值替换为oDiv.style.width。
修改代码部分代码如下:
<style> #div1{height:200px; background:#f00; border:4px solid black;} </style> <script> window.onload=function(){ var oDiv=document.getElementById("div1"); oDiv.onclick=function(){ startMove(); } } var timer=null; function startMove(){ clearInterval(timer); timer=setInterval(function(){ var oDiv=document.getElementById("div1"); oDiv.style.width=parseInt(oDiv.style.width)-1+"px"; },50) } </script> </head> <body> <div id="div1" style="width:200px"></div> </body>
但是带来新的问题：无法将所有样式都写在行内并在js中进行获取。
解决办法：使用getComputedStyle()和currentStyle来解决该办法。
封装一个getStyle()的函数，用来获取样式中的任意属性
最终代码如下<!doctype html>
<html> <head> <meta charset="utf-8"> <title>获取样式</title> <style> #div1{width:200px;height:200px; background:#f00; border:10px solid black; font-size:6px; color:white;} </style> <script> window.onload=function(){ var oDiv=document.getElementById("div1"); oDiv.onclick=function(){ startMove(); } } var timer=null; function startMove(){ clearInterval(timer); timer=setInterval(function(){ var oDiv=document.getElementById("div1"); oDiv.style.width=parseInt(getStyle(oDiv,‘width‘))-1+"px"; //任意属性的变化，在这里都可以进行添加 },50) } //封装好的获取样式的函数 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr];//兼容ie } else{ return getComputedStyle(obj,false)[attr];//兼容ff } } </script> </head> <body> <div id="div1">font-size</div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/mirror1988/p/4803166.html
