标签：ace http etc text ++ pat efault script mat
css样式分为内联样式、内部样式和外部样式，然而object.style.xxx只能够获取内联样式的属性值，内部样式和外部样式的css样式获取不到
js获取方法使用document.defaultView.getComputedStyle()、currentStyle()
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> --> 7 <title>Promise animation</title> 8 <style> 9 .ball{ 10 width: 40px; 11 height: 40px; 12 border-radius: 20px; 13 margin-left: 10px; 14 } 15 .ball1{ 16 background: red; 17 } 18 .ball2{ 19 background: yellow; 20 } 21 .ball3{ 22 background: green; 23 } 24 </style> 25 </head> 26 <body> 27 <div class="ball ball1"></div> 28 <div class="ball ball2"></div> 29 <div class="ball ball3"></div> 30 <script type="text/javascript"> 31 var ball1=document.querySelector(‘.ball1‘); 32 var ball2=document.querySelector(‘.ball2‘); 33 var ball3=document.querySelector(‘.ball3‘); 34 35 //用于获取外部引入的属性值，解决margin-left未写在行内获取为空的情况 36 function getCurrentstyle(obj,prop){ 37 if (obj.currentStyle) //IE 38 { 39 return obj.currentStyle[prop]; 40 } 41 else if (window.getComputedStyle) //非IE 42 { 43 property = prop.replace(/([A-Z])/g, "-$1"); 44 property = prop.toLowerCase(); 45 return document.defaultView.getComputedStyle(obj,null)[property]; 46 } 47 return null; 48 } 49 50 function animate(ball,distance,cb){ 51 setTimeout(function(){ 52 var marginLeft=parseInt(getCurrentstyle(ball,‘margin-left‘),10); 53 if (marginLeft===distance) { 54 cb && cb(); 55 }else { 56 if (marginLeft<distance) { 57 marginLeft++; 58 }else { 59 marginLeft--; 60 } 61 ball.style.marginLeft=marginLeft+‘px‘; 62 animate(ball,distance,cb) 63 } 64 },13) 65 } 66 animate(ball1,100,function(){ 67 animate(ball2,200,function(){ 68 animate(ball3,300,function(){ 69 animate(ball3,150,function(){ 70 animate(ball2,150,function(){ 71 animate(ball1,150,function(){ 72 // 73 }) 74 }) 75 }) 76 }) 77 }) 78 }) 79 </script> 80 </body> 81 </html>
标签：ace http etc text ++ pat efault script mat
原文地址：http://www.cnblogs.com/Jayeblog/p/6748243.html
