当我按下箭头键时，我正试图用访问div的css属性的JS移动div。我已经实现了当我按下一个键但div没有移动时触发警报。这是我的全部代码：
编辑：我更改了JS脚本。现在它确实向左移动了10px(通过从CSS中删除transform属性(，但只移动了一次。我试着用计数器来修复它，它将10px乘以我点击键的次数，但仍然只做了一次。
function mover(event) {
capa=document.getElementById("movil");
left=-10;
Ltimes=1;
switch (event.keyCode) {
case 37:
// alert("works");
capa.style.transform ="translateX("+left*Ltimes+"px)";
Ltimes++;
break;
case "ArrowRight":
break;
case "ArrowUp":
break;
case "ArrowDown":
break;
default:
break;
}
}div#movil {
background-color: khaki;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
div#arriba {
position: relative;
text-align: center;
}
div#abajo {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
div#centro {
width: 100%;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
div#izq {
position: absolute;
}
div#der {
right: 0;
position: absolute;
}<body onkeydown="mover(event)">
<div id="movil">
<div id="arriba">
<button>+</button>
<button>-</button>
</div>
<div id="abajo">
<button>+</button>
<button>-</button>
</div>
<div id="centro">
<div id="izq">
<button>+</button>
<button>-</button>
</div>
<div id="der">
<button>+</button>
<button>-</button>
</div>
</div>
</div>
<input type="text" id="a">
</body>正如我所说，我已经实现了触发"工作"警报，但div不会移动。
PS：忽略按钮，我稍后会让它们使div变大或变小。
capa.style.transform ="translateX(-10px)";看起来就是您所说的
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateX供参考
capa = document.getElementById("movil");
function mover(event) {
switch (event.keyCode) {
case 37:
alert("works");
capa.style.transform ="translateX(-10px)";
break;
case "ArrowRight":
break;
case "ArrowUp":
break;
case "ArrowDown":
break;
default:
break;
}
}div#movil {
background-color: khaki;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
div#arriba {
position: relative;
text-align: center;
}
div#abajo {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
div#centro {
width: 100%;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
div#izq {
position: absolute;
}
div#der {
right: 0;
position: absolute;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="js.js"></script>
</head>
<body onkeydown="mover(event)">
<div id="movil">
<div id="arriba">
<button>+</button>
<button>-</button>
</div>
<div id="abajo">
<button>+</button>
<button>-</button>
</div>
<div id="centro">
<div id="izq">
<button>+</button>
<button>-</button>
</div>
<div id="der">
<button>+</button>
<button>-</button>
</div>
</div>
</div>
<input type="text" id="a">
</body>
</html>这里是一个工作示例，通过获取左/上属性值，减去设置的像素量，然后重新应用该值。
如果加载外部css，则需要- getComputedStyle->
- getPropertyValue->查找当前左侧或顶部的值
- 用.match((和.join((从开始/结束处删除所有字母(px(
- 将以上所有内容解析为一个整数，这样我们就可以删除或添加一个数字
- 添加或删除我们的"pxToMove"值
- 将所有这些转换回字符串，并在末尾添加"px">
capa = document.getElementById("movil");
function mover(event) {
var style = getComputedStyle(capa);
var pxToMove = 10;
switch (event.keyCode) {
case 37:
//alert("works");
capa.style.left= (parseInt(style.getPropertyValue("left").match(/d/g).join("")) - pxToMove).toString()+"px";
break;
case 39:
capa.style.left= (parseInt(style.getPropertyValue("left").match(/d/g).join("")) + pxToMove).toString()+"px";
break;
case 38:
capa.style.top= (parseInt(style.getPropertyValue("top").match(/d/g).join("")) - pxToMove).toString()+"px";
break;
case 40:
capa.style.top= (parseInt(style.getPropertyValue("top").match(/d/g).join("")) + pxToMove).toString()+"px";
break;
default:
alert(event.keyCode);
break;
}
}div#movil {
background-color: khaki;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
div#arriba {
position: relative;
text-align: center;
}
div#abajo {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
div#centro {
width: 100%;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
div#izq {
position: absolute;
}
div#der {
right: 0;
position: absolute;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="js.js"></script>
</head>
<body onkeydown="mover(event)">
<div id="movil">
<div id="arriba">
<button>+</button>
<button>-</button>
</div>
<div id="abajo">
<button>+</button>
<button>-</button>
</div>
<div id="centro">
<div id="izq">
<button>+</button>
<button>-</button>
</div>
<div id="der">
<button>+</button>
<button>-</button>
</div>
</div>
</div>
<input type="text" id="a">
</body>
</html>我真的很喜欢所有的评论，这是最后的工作代码：
var left=-10;
var Ltimes=1;
function mover(event) {
capa=document.getElementById("movil");
switch (event.keyCode) {
case 37:
// alert("works");
capa.style.transform ="translateX("+left*Ltimes+"px)";
Ltimes++;
break;
case "ArrowRight":
break;
case "ArrowUp":
break;
case "ArrowDown":
break;
default:
break;
}
}div#movil {
background-color: khaki;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
/* transform: translate(-50%, -50%); */
}
div#arriba {
position: relative;
text-align: center;
}
div#abajo {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
div#centro {
width: 100%;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
div#izq {
position: absolute;
}
div#der {
right: 0;
position: absolute;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="js.js"></script>
</head>
<body onkeydown="mover(event)">
<div id="movil">
<div id="arriba">
<button>+</button>
<button>-</button>
</div>
<div id="abajo">
<button>+</button>
<button>-</button>
</div>
<div id="centro">
<div id="izq">
<button>+</button>
<button>-</button>
</div>
<div id="der">
<button>+</button>
<button>-</button>
</div>
</div>
</div>
<input type="text" id="a">
</body>
</html>