Question

我有一个这样定位的 div：

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

我还有 3 个简单的按钮，每个按钮都可以将 div 更改为特定位置。

我为每个按钮创建了一个新 div，并将显示从无更改为“块”。这有效，但我需要为我需要创建的另外 9 个这样做，而且它太重复了。

我如何用 js 做到这一点？

Answer 1

您可以使用CSS custom properties：

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%");
});

如何更改 div 位置 onclick

1 个答案: