js修改样式和内部样式起了冲突

不上代码了,语言描述一下.

一个div,我用内联给绝对定位的top和left,然后用js修改top和left,功能正常.

但当不用内联而采用内部样式或者外部样式的时候,js修改top和left就失效了.

内联优先级最高,js都能够修改,怎么反而和内部/外部样式冲突了呢?

我把代码补上:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div {
				background: orange;
				width: 100px;
				height: 100px;
				padding: 30px;
				border-radius: 200px;
			}
		</style>
	</head>

	<body>
		<div id="ball" style="position: absolute;top:50px;left: 50px;">

		</div>
		<script type="text/javascript ">
			var key = {
				W: 87,
				S: 83,
				A: 65,
				D: 68
			}

			function keyMove(e) {
				var ball = document.getElementById('ball');
				var top = parseInt(ball.style.top);
				var left = parseInt(ball.style.left);
				switch(e.keyCode) {
					case key.W:
						ball.style.top = top - 50 + 'px';
						break;
					case key.A:
						ball.style.left = left - 50 + 'px';
						break;
					case key.S:
						ball.style.top = top + 50 + 'px';
						break;
					case key.D:
						ball.style.left = left + 50 + 'px';
						break;
				}
			}
			document.onkeydown = keyMove;
		</script>
	</body>

</html>

这样写成内联是一点问题没有的,但把position: absolute;top:50px;left: 50px;放到内部或外部样式,js就失效了.

留白未来

浏览 3583回答 3

3回答

随时随地看视频慕课网APP