当我按下箭头键时，我试图用 JS 访问 div 的 css 属性来移动 div。 我已经实现了在按下按键但 div 没有移动时触发警报。这是我的所有代码:
编辑:我更改了我的 JS 脚本。现在它确实向左移动了 10px(通过从 CSS 中删除变换属性)，但它只执行一次。我尝试用计数器修复它，将 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>正如我所说，我已经成功触发“works”警报，但 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>关于javascript - 用 JS 移动 div(已编辑)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60495314/