如何更改 div position onclick

Question

我有一个像这样定位的div：

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

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

我为每个按钮创建了一个新的 div，并将显示从无更改为“块”。 这行得通，但我需要再创建 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%");
});