如何通过按钮单击交换两个 div (1)

📌 相关文章

📜 如何通过按钮单击交换两个 div (1)

📅 最后修改于: 2023-12-03 15:24:56.871000 🧑 作者: Mango

通过按钮单击交换两个 div

在网页开发中，有时需要通过按钮单击来实现某些交互功能。本篇文章介绍如何通过按钮单击交换两个 div 的位置。

HTML 结构

首先需要创建两个 div 并设置不同的样式：

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

并添加一个按钮：

<button id="swapBtn">Swap</button>

CSS 样式

为了能够看清交换效果，需要设置一些 CSS 样式：

.box1, .box2 {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50px;
  left: 50px;
}
.box1 {
  background-color: red;
}
.box2 {
  background-color: blue;
}

JavaScript 实现

通过 JavaScript 来实现按钮单击交换两个 div 的位置。首先获取到需要交换位置的两个 div：

let box1 = document.querySelector('.box1');
let box2 = document.querySelector('.box2');

然后为按钮添加单击事件监听器，当按钮被单击时执行交换操作：

let swapBtn = document.getElementById('swapBtn');

swapBtn.addEventListener('click', function() {
  let temp = box1.style.top;
  box1.style.top = box2.style.top;
  box2.style.top = temp;
  
  temp = box1.style.left;
  box1.style.left = box2.style.left;
  box2.style.left = temp;
});

完整代码

完整代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>Swap Div on Button Click</title>
  <style>
    .box1, .box2 {
      width: 50px;
      height: 50px;
      position: absolute;
      top: 50px;
      left: 50px;
    }
    .box1 {
      background-color: red;
    }
    .box2 {
      background-color: blue;
    }
  </style>
</head>
<body>

  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
  
  <button id="swapBtn">Swap</button>

  <script>
    let box1 = document.querySelector('.box1');
    let box2 = document.querySelector('.box2');
    
    let swapBtn = document.getElementById('swapBtn');
    
    swapBtn.addEventListener('click', function() {
      let temp = box1.style.top;
      box1.style.top = box2.style.top;
      box2.style.top = temp;
      
      temp = box1.style.left;
      box1.style.left = box2.style.left;
      box2.style.left = temp;
    });
  </script>

</body>
</html>

以上就是实现通过按钮单击交换两个 div 的位置的完整代码和解释。