Javascript visual Div重新定位onclick css js

尝试在每次单击两个div时使用onclick直观地重新定位两个div。 是否可以交换每个div onclick的完整CSS以实现此效果

这是否被视为最佳实践，或者是否存在 重新排列div容器的更好方法

谢谢

HTML

---

在单击div时只需更改div的类之后，将css基于类而不是div id

    function changeClass()
    {
      if (document.getElementById("box_b").className == 'first_css')
         document.getElementById("box_b").className = 'second_css';
      else
         document.getElementById("box_b").className = 'first_css';
    }

我已将其更新为：

---

快速跟进：我要做的是切换方框（及其内容）的位置。如：黑盒上的白盒->点击白盒->两个开关位置（但保留其所有原始内容）。这个例子似乎在切换框，但没有将框的设计保持在框的顶部。我有更新，但你可以做你想做的事情，只需将特定的css类应用到你的div，并在点击框时更改css类

/* Wrap all Divs */

#box_a {
}

/* Background Div */
#box_b {
position: absolute;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: black;
}

/* Foreground Div */

#box_g {
position: absolute;
top: 14.05%;
right: 20%;
bottom: 20%;
left: 20%;
background: white;
z-index: 99;
}

    function changeClass()
    {
      if (document.getElementById("box_b").className == 'first_css')
         document.getElementById("box_b").className = 'second_css';
      else
         document.getElementById("box_b").className = 'first_css';
    }