如何更改div位置onclick

Question

我有一个div的位置如下：

#gr{
position: relative;
top:135px;
left:40px;
display: inline-flex;
align-items: center;
width: 70px;
margin:0px;
}

我还有3个简单的按钮，每个按钮都应该将div更改到特定的位置。

我为每个按钮创建了一个新的div，并将显示从none更改为"；块"；。这是有效的，但我需要为我需要创建的另外9个，它将过于重复。

如何使用js来完成此操作？

Answer 1

您可以使用CSS自定义属性：

HTML

<div class="container">
<button id="right" class="btn">Right</button>
<button id="left" class="btn">Left</button>
<button id="bottom" class="btn">Bottom</button>
<button id="center" class="btn">Center</button>
<div class="parent-div">
<div id="div" class="div"></div>
</div>
</div>

CSS

::root {
--left: 0px;
--top: 0px;
--translate: 0px;
}
.container {
width: 100%;
height: 100vh;
background-color: lightgoldenrodyellow;
}
.parent-div {
width: 100%;
height: 100%;
position: relative;
}
.div {
width: 80px;
height: 80px;
background-color: lightcoral;
position: absolute;
top: var(--top);
left: var(--left);
transform: translate(var(--translate), var(--translate));
}
.btn {
padding: 10px 5px;
}

JS

let divEl = document.getElementById("div");
document.getElementById("right").addEventListener("click", () => {
divEl.style.setProperty("--left", "500px");
divEl.style.setProperty("--top", "calc(100vh-80px)");
divEl.style.setProperty("--translate", "0px");
});
document.getElementById("left").addEventListener("click", () => {
divEl.style.setProperty("--left", "0px");
divEl.style.setProperty("--top", "calc(100vh-80px)");
divEl.style.setProperty("--translate", "0px");
});
document.getElementById("bottom").addEventListener("click", () => {
divEl.style.setProperty("--top", "100vh");
divEl.style.setProperty("--translate", "0px");
});
document.getElementById("center").addEventListener("click", () => {
divEl.style.setProperty("--left", "50%");
divEl.style.setProperty("--top", "50%");
divEl.style.setProperty("--translate", "-50%");
});