最近调试程序:
<!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这种方式获取。