CSS styles are divided into inline styles, internal styles, and external styles, whereas object.style.xxx can only get property values for inline styles, and CSS styles for internal and external styles do not get
JS Get method using Document.defaultView.getComputedStyle (), Currentstyle ()
1<! DOCTYPE html>2"en">34<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{Ten width:40px; One height:40px; Aborder-radius:20px; -margin-left:10px; - } the . ball1{ - background:red; - } - . ball2{ + Background:yellow; - } + . ball3{ A Background:green; at } -</style> - -<body> -<divclass="Ball Ball1"></div> -<divclass="Ball Ball2"></div> in<divclass="Ball Ball3"></div> -<script type="Text/javascript"> to varBall1=document.queryselector ('. Ball1'); + varBall2=document.queryselector ('. Ball2'); - varBall3=document.queryselector ('. Ball3'); the * //used to get externally introduced property values, to resolve the case where Margin-left is not written in the row to get empty $ function Getcurrentstyle (obj,prop) {Panax Notoginseng if(Obj.currentstyle)//IE - { the returnObj.currentstyle[prop]; + } A Else if(window.getComputedStyle)//Non-IE the { +property = Prop.replace (/([A-z])/g,"-$1"); -property =prop.tolowercase (); $ returnDocument.defaultView.getComputedStyle (obj,NULL) [property]; $ } - return NULL; - } the - function Animate (BALL,DISTANCE,CB) {Wuyi setTimeout (function () { the varMarginleft=parseint (Getcurrentstyle (Ball,'Margin-left'),Ten); - if(marginleft===distance) { WuCB &&CB (); -}Else { About if(marginleft<distance) { $marginleft++; -}Else { -marginleft--; - } Aball.style.marginleft=marginleft+'px'; + Animate (BALL,DISTANCE,CB) the } -}, -) $ } theAnimate (Ball1, -, function () { theAnimate (Ball2, $, function () { theAnimate (Ball3, -, function () { theAnimate (Ball3, Max, function () { -Animate (Ball2, Max, function () { inAnimate (Ball1, Max, function () { the // the }) About }) the }) the }) the }) + }) -</script> the</body>BayiNon-inline CSS style fetching method