获取css的属性样式的兼容写法
function getstyle(DOM,name){ if(DOM.currentStyle){ IE的兼容 return DOM.currentStyle[name]; }else{其他浏览器的兼容 return getComputedStyle(DOM,false)[name]; } } window.getComputedStyle(Element,false)['width']获取元素宽高属性的总结:
offsetWidth 既能获取元素的宽高,还能获取元素的边框的宽高 clientWidth 只能获取元素的宽高,不能获取元素的边框的宽高 op.style.width 只能获取带行内样式元素的宽高,内联样式元素的宽高获取不到,并且获取的值 带有px单位多个小球移动效果图
具体代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #box{ width: 100px; height: 100px; background: red; border-radius:50% ; position: absolute; } #box1{ width: 100px; height: 100px; background: red; border-radius:50% ; position: absolute; top:150px; } </style> </head> <body> <button onclick="btn()">开始</button> <div id="box"></div> <div id="box1"></div> </body> <script type="text/javascript"> //对案例中重复的代码进行封装 var odiv=document.getElementById('box'); var odiv1=document.getElementById('box1'); var timer; var timer1; function btn(){ clearInterval(timer);//解决小球加速问题 timer=setInterval(function(){ if(odiv.offsetLeft>=1500){ clearInterval(timer); }else{ odiv.style.left=odiv.offsetLeft+10+'px'; } },50) clearInterval(timer1);//解决小球加速问题 timer1=setInterval(function(){ if(odiv1.offsetLeft>=1500){ clearInterval(timer1); }else{ odiv1.style.left=odiv1.offsetLeft+10+'px'; } },50) } </script> </html>