style.left不起作用的问题

最近调试程序:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div0 {
				width: 20px;
				height: 20px;
				position: absolute;
				border-radius: 10px;
				background: green;
				left: 50%;
			}
		</style>
	</head>

	<body>
		<div id="div0"></div><br/>
		<button id="btn1" οnclick="xx()">一个向左移动的按键<button>
	</body>
	
	<script type="text/javascript">
		function xx(){
		var x = document.getElementById("div0");	
		var j = x.style.left;	
		var z = parseInt(j.substr(0,j.length-2));	
		x.style.left = (z + 20)+"px" ;		
		}		
	</script>
<html>
当点击按键时,绿色的小球并不移动。

经调试发现变量j的值为空,也就是无法获取到left的值。不在css中设置left的值,而是在js中进行初始化,程序可以通过。代码如下:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div0 {
				width: 20px;
				height: 20px;
				position: absolute;
				border-radius: 10px;
				background: green;
			}
		</style>
	</head>

	<body>
		<div id="div0"></div><br/>
		<button id="btn1" οnclick="xx()">一个向左移动的按键<[表情]tton>
	</body>
	
	<script type="text/javascript">
		var x = document.getElementById("div0");	
		x.style.left="50%";
		function xx(){
		
		var j = x.style.left;	
		var z = parseInt(j.substr(0,j.length-2));	
		x.style.left = (z + 20)+"px" ;		
		}		
	</script>
<html>

总结:

left样式必须写在元素内部才能通过div.style.left直接获取属性值(也就是必须是内联样式才行),或者通过js初始化left的值,也可以获取到left属性。定义在css中的left样式不能通过style.left这种方式获取。

猜你喜欢

转载自blog.csdn.net/wwwjr00/article/details/80416160