点按钮完成元素内容交换JavaScriptCSS 盒子模型的共合完整的程序

下面是一个完整的程序，通过点击按钮交换两个元素的内容：

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>交换元素内容</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      border: 1px solid black;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .button {
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <div class="box" id="box1">元素1</div>
  <div class="box" id="box2">元素2</div>
  <button class="button" onclick="swapContent()">交换内容</button>

  <script src="script.js"></script>
</body>
</html>

JavaScript (script.js):

function swapContent() {
  var box1 = document.getElementById('box1');
  var box2 = document.getElementById('box2');
  
  var temp = box1.innerHTML;
  box1.innerHTML = box2.innerHTML;
  box2.innerHTML = temp;
}

这个程序包含了两个HTML盒子元素，每个都有一个唯一的ID（box1和box2）。通过JavaScript，我们在点击按钮时获取这两个元素，并交换它们的innerHTML属性。

注意：在CSS中，我们使用了盒子模型来定义盒子的样式。这里的盒子模型包含了宽度、高度、边框和内边距等属性