                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /Node.js
                        
                        /進(jìn)擊Node.js基礎(chǔ)（二）

為什么marginLeft不能寫(xiě)在head下的style里面？

<!DOCTYPE?html>
<html>
<head>
	<title>Promise?animation</title>
	<meta?charset="utf-8">
	<style?type="text/css">
		.ball{
			width:?40px;
			height:?40px;
			border-radius:?50%;
			margin-left:?0px;
		}
		.ball_01{
			background:?red;
		}
		.ball_02{
			background:?yellow;
		}
		.ball_03{
			background:?green;
		}
	</style>
</head>
<body>
	<div?class="ball?ball_01"?style="margin-left:?0"></div>
	<div?class="ball?ball_02"?style="margin-left:?0"></div>
	<div?class="ball?ball_03"?style="margin-left:?0"></div>
</body>
<script?type="text/javascript"?src="node_modules/bluebird/js/browser/bluebird.js"></script>
<script?type="text/javascript">
	window.onload=function?()?{
		var?ball_01=document.querySelector(".ball_01");
	????var?ball_02=document.querySelector(".ball_02");
	????var?ball_03=document.querySelector(".ball_03");

		function?animate(ball,distance,callback)?{
			setTimeout(function(){
				var?marginLeft?=?parseInt(ball.style.marginLeft,10);
				if(marginLeft?===?distance){
					callback&&callback();
				}else{
					if(marginLeft?<?distance){
						marginLeft++;
					}else{
						marginLeft--;
					}
					ball.style.marginLeft?=?marginLeft?+?"px";
					animate(ball,distance,callback);
				}
			},?13);
		}

		//?animate(ball_01,100,function(){
		//?	animate(ball_02,200,function(){
		//?		animate(ball_03,300,function(){
		//?			animate(ball_03,150,function(){
		//?				animate(ball_02,150,function(){
		//?					animate(ball_01,150,function(){
		//?						//?
		//?					})
		//?				})
		//?			})
		//?		})
		//?	})
		//?})


		var?Promise?=?window.Promise;
		function?promiseAnmiate(ball,distance){
			return?new?Promise(function(resolve,reject){
				function?_animate()?{
					setTimeout(function(){
						var?marginLeft?=?parseInt(ball.style.marginLeft,10);
						if(marginLeft?===?distance){
							resolve();
						}else{
							if(marginLeft<distance){
								marginLeft++;
							}else{
								marginLeft--;
							}
							ball.style.marginLeft?=?marginLeft?+?"px";
							_animate();
						}
					},?13);
				}
				_animate();
			});
		}

		promiseAnmiate(ball_01,100)
		.then(function(){
			return?promiseAnmiate(ball_02,200)
		})
		.then(function(){
			return?promiseAnmiate(ball_03,300)
		})
		.then(function(){
			return?promiseAnmiate(ball_03,150)
		})
		.then(function(){
			return?promiseAnmiate(ball_02,150)
		})
		.then(function(){
			return?promiseAnmiate(ball_01,150)
		})
	}
</script>
</html>

飄移的鼻毛

2016-11-25

源自：進(jìn)擊Node.js基礎(chǔ)（二） 1-2

關(guān)注問(wèn)題我要回答

1679

操作

收起

2 回答

hey自然
2016-12-06

ball.style.marginLeft 拿到的是行內(nèi)樣式！ style 只是你獲取的這個(gè) DOM節(jié)點(diǎn) 的一個(gè)屬性而已（如果這個(gè)DOM節(jié)點(diǎn) 有 style 這個(gè)屬性的話）靜下心來(lái)多鞏固下基礎(chǔ)吧。