时间戳

首页 > 解决方案 > 使用 Javascript/CSS 切换两个 HTML 元素的位置

javascript - 使用 Javascript/CSS 切换两个 HTML 元素的位置

问题描述

我们在页面底部附近有一些 HTML 元素没有被大量使用。我们想使用 Google 跟踪代码管理器进行一些测试，以将这些元素与页面顶部附近的一些元素进行切换。是否可以使用纯 JS 或 CSS 切换两个 HTML 元素的位置？例如，假设我要切换 div1 和 div3 的位置：

<div class="container">
  <div class="div1">
    <span>1</span>
  </div>
  <div class="div2">
    <span>2</span>
  </div>
  <div class="div3">
    <span>3</span>
  </div>
</div>

标签： javascriptcssgoogle-tag-manager

解决方案

您可以像这样使用 css 的 flexbox 来切换子内容的位置。

.container {
  display: flex;
}

.div1 {
  order: 3;
}

.div3 {
  order: 1;
}

.div2 {
  order: 2;
}
<div class="container">
  <div class="div1">
    <span>1</span>
  </div>
  <div class="div2">
    <span>2</span>
  </div>
  <div class="div3">
    <span>3</span>
  </div>
</div>

推荐阅读